×
广告

Vue-cli 脚手架的安装与使用(详细说明)

96
weir_will
2018.04.05 23:47 字数 481

1.1.1.1 安装Node.js

无疑Node.js是前端编程的必备环境配置之一。 安装过程非常简单,与平时安装的一般软件无异。 官方网站:https://nodejs.org/en/

Node.js自带npm包管理工具,使用npm可使我们快速安装项目中所需要的组件。 打开Node.js命令行工具,输入

node –version # 查看node的版本
npm -version #查看npm版本

可查看Node.js当前的版本,如果没有出现版本号,很可能是Node.js没安装成功,或者电脑环境没配置好

node版本

1.1.1.2 2.安装Vue.js devtools扩展程序

打开Chrome网上应用店,安装Vue.js devtools。这个插件,便于我们在进行Vue.js开发过程中的调试,是一个很有用的工具。

1.1.1.3 安装vue-cli脚手架工具

安装好了 node,我们可以直接全局安装 vue-cli:

npm install -g vue-cli

如果安装失败,可以使用 npm cache clean 清理缓存,然后再重新安装。后面的安装过程中,如有安装失败的情况,也需要先清理缓存但是这种安装方式比较慢,推荐使用国内镜像来安装,所以我们先设置 cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

同样可以使用 cnpm -v 查看是否安装成功

cnpm install -g vue-cli

安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功。


vue-cli安装.png

1.1.1.4 项目的搭建

使用vue –help查看Vue的可用的命令:

vue-help.png

使用vue list 命令操作显示如下:

vue list.png

在看看vue init的用法,输入vue init –help

vue-cli安装.png

使用如下命令构建项目:

vue init webpack my_vue_project_2018-04-05

构建项目.png

关于项目的运行操作:


输入 npm run dev 运行下项目:

运行效果.png

1.1.1.5 项目目录结构

项目目录结构.png

详细说明参考文章:Gitbook文章

前端学习之路
Web note ad 1