vue-cli快速搭建Vue脚手架 （vue-cli 2.x 模板）

一、确保已经安装了npm 或者 yarn

　　查看是否安装了npm或yarn：在控制台输入npm -v 或 yarn -v 能看到版本号就表明已经安装

　　（注意：Vue CLI 须要 Node.js 8.9 或更高版本 (推荐 8.11.0+)）

二、全局安装vue脚手架工具 vue-cli

    (这里安装的是vue-cli 2.X 的脚手架工具）

yarn global add vue-cli # OR npm install -g vue-cli

   安装后，能够在控制台输入 vue --version 验证是否安装成功）

   另：

  　　若是要安装3.X的脚手架工具，输入命令：

yarn global add @vue/cli # OR npm install -g @vue/cli

//若是是用3.X的脚手架工具，还须要安装@vue/cli-init才能使用 vue init命令
yarn global add @vue/cli-init
# OR
npm install -g @vue/cli-init

三、使用vue-cli初始化项目

控制台切换到你的项目存放路径，输入：

vue init <template-name> <project-name>

<template-name> : 模板名称，vue-cli提供了5中模板：
①webpack : 一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。
②webpack-simple : 一个简单webpack+vue-loader的模板，不包含其余功能，让你快速的搭建vue的开发环境。
③browserify : 一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
④browserify-simple : 一个简单Browserify+vueify的模板，不包含其余功能，让你快速的搭建vue的开发环境。
⑤simple : 一个最简单的单页应用模板。

<project-name> : 项目名称（不能包含大写字母，不然会报错）

例：

vue init webpack my-vue

　　输入命令后，会询问一些选项：

　　　　注意：

　　　　①Use ESLint to line your code ?选择 No   ----ESLint的不少规范和咱们平时开发的习惯不太一致，因此这里不建议使用

　　　　②Should we run `npm install` for you after the project has been created?选择No, I will handle that myself　　----我安装的时候，选择Yes,use Yarn最后卡在了最后一步，可是选择No之后，再本身执行yarn 就成功了。。。。

　　　　

四、进入到 my-vue 目录下，安装package.json 文件中的依赖包

>cd my-vue >yarn //强烈推荐使用yarn
或 >npm install

　　如图：

　　

　　输入命令后等待依赖包安装完成便可

　　（注意，yarn安装自动生成的yarn.lock 存放了安装过程当中的重要信息，必定要放到版本控制当中，不然多人共同开发可能会引发一些错误）

五、运行项目

　　输入如下命令：

yarn run dev
# OR
npm run dev

而后便可在浏览器中输入 localhost:8080 浏览：

六、vue项目目录说明：

├── build/ # webpack 编译任务配置文件: 开发环境与生产环境 │ └── ... ├── config/ │ ├── index.js # 项目核心配置 │ └── ... ├ ── node_module/ #项目中安装的依赖模块 ── src/ │ ├── main.js # 程序入口文件 │ ├── App.vue # 程序入口vue组件 │ ├── components/ # 组件 │ │ └── ... │ └── assets/ # 资源文件夹，通常放一些静态资源文件 │ └── ... ├── static/ # 纯静态资源 (直接拷贝到dist/static/里面) ├── test/ │ └── unit/ # 单元测试 │ │ ├── specs/ # 测试规范 │ │ ├── index.js # 测试入口文件 │ │ └── karma.conf.js # 测试运行配置文件 │ └── e2e/ # 端到端测试 │ │ ├── specs/ # 测试规范 │ │ ├── custom-assertions/ # 端到端测试自定义断言 │ │ ├── runner.js # 运行测试的脚本 │ │ └── nightwatch.conf.js # 运行测试的配置文件 ├── .babelrc # babel 配置文件 ├── .editorconfig # 编辑配置文件 ├── .gitignore # 用来过滤一些版本控制的文件，好比node_modules文件夹 ├── index.html # index.html 入口模板文件 └── package.json # 项目文件，记载着一些命令和依赖还有简要的项目描述信息 └── README.md #介绍本身这个项目的，可参照github上star多的项目。 build/