命令行工具搭建Vue.js脚手架

1、检查node环境

在安装vue的环境之前，安装NodeJS环境是必须的。可以使用node -v指令检查；

上面的版本是6.02.0的；

2、安装vue-cli

接下来进入正题，先全局安装vue-cli,使用指令npm install -g vue-cli；

用vue指令检查是否安装成功，出现以下界面则表示安装成功：

3、初始化项目

先cd到自己向要创建新项目的文件夹下，然后使用VUe init指令（vue init 模板类型 项目名称）vue的模板类型有很多种，可以使用vue list指令查看，如下图：

我们这里使用webpack模板，项目名叫sell,所以指令如下：
Vue init webpack sell
然后可以一路回车下去；结果如下图：

接下来进入sell文件夹，运行npm install指令，会发现项目中多了一个node_modules文件夹

4、运行Vue环境

接下来使用 npm run dev命令运行项目环境，效果如下：

这里显示了已经监听了8080端口，接下来在浏览器访问http://localhost:8080/
会看到如下页面：

生成的脚手架目录如下：

以上是Vue脚手架的基本的目录结构，我们一般编写代码都放在src目录下，这里有一个components文件夹，该目录用于存在自定义组件。src目录小还有一个App.vue，该文件是项目展示的窗口文件。