本文共 4434 字，大约阅读时间需要 14 分钟。

一,前言

截止到这一篇之前的内容,都算是对Vue的基本介绍从这篇开始,所介绍的只是更接近于实际项目开发的标准在对Vue有了基本了解的情况下,后续将介绍关于Vue项目工程化的内容,例如:使用Vue-cli创建脚手架工程webpack+常用插件+dev,prd环境的配置优化Vue-router前端路由(按需加载的应用)Vuex状态管理vue-resource/axios数据请求常用UI组件库介绍,包括PC和App组件库,如:ElementUI,MintUI,iView,VUX等这一篇,就来介绍Vue-cli的安装以及创建Vue脚手架工程备注:之前写过一篇Vue-cli的安装和使用,这里重新对其进行了梳理

二,Vue-cli的安装

Vue的Vue-cli和NodeJS的express-cli相似,都可以生成项目的脚手架Vue提供了一个Vue-cli插件,可用于自动初始化一个Vue工程,开发者可以使用生成的Vue工程作为codeBase,直接进行项目开发,Vue-cli为搭建项目带来了极大的便利

环境需求:

需要安装NodeJS,且版本在4.0.0以上

使用npm全局安装vue-cli:

bogon:~ Brave$ sudo npm install -g vue-cli

完成后,执行vue命令查看安装是否成功:

bogon:~ Brave$ vue  Usage: vue  [options]  Options:    -V, --version  output the version number    -h, --help     output usage information  Commands:    init        generate a new project from a template    list        list available official templates    build       prototype a new project    help [cmd]  display help for [cmd]

如上输出说明安装成功

三,使用Vue-cli创建脚手架工程

Vue-cli提供了几种可用的模板-执行vue list进行查看:

bogon:~ Brave$ vue list  Available official templates:  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.  ★  pwa - PWA template for vue-cli based on the webpack template  ★  simple - The simplest possible Vue setup in a single HTML file  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.这里我们常用的是倒数第二种:webpack

使用命令vue init webpack HelloVue

(若创建工程 vue init webpack xxx 报错请参照以下第五部分的解决办法)

bogon:~ Brave$ vue init webpack HelloVue? Project name hellovue                         // 工程名称? Project description hellovue                  // 工程描述,会在README.md文件生成输入的内容? Author wangzhen <376086383@qq.com>            // 作者,如果有git，就是读取git的User信息? Vue build standalone? Install vue-router? Yes                       // 否安装Vue路由? Use ESLint to lint your code? Yes             // ESLint管理代码(ES6代码风格检查器)? Pick an ESLint preset Standard                // ESlint-类型? Setup unit tests with Karma + Mocha? No       // 使用单元测试工具karma和mocha 默认是? Setup e2e tests with Nightwatch? No           // 使用e2e测试框架 NightWatch 默认是   vue-cli · Generated "HelloVue".   To get started:     cd HelloVue     npm install     npm run dev   Documentation can be found at https://vuejs-templates.github.io/webpack

Vue build方式说明:

Vue build方式有两种,一种standalone方式，第二种runtime-only为runtime方式。runtime 打包的是 /node_modules/vue/dist/vue.common.jsstandalone 打包的是 /node_modules/vue/dist/vue.jsruntime 和 standalone 这两种方式对普通用户使用起来没区别，大多数人都是在*.vue里写
   ，所以用runtime就够了。

四,运行Vue脚手架工程

在上一步执行创建命令,vue创建项目后已给出了如何启动这个项目的提示:

To get started:     cd HelloVue     npm install     npm run dev   Documentation can be found at https://vuejs-templates.github.io/webpack:

按照提示一步步进行操作:

1)进入工程目录:bogon:~ Brave$ cd HelloVue/2)安装项目依赖:bogon:HelloVue Brave$ npm install3)启动项目:bogon:HelloVue Brave$ npm run dev> hellovue@1.0.0 dev /Users/Brave/HelloVue> node build/dev-server.js> Starting dev server... DONE  Compiled successfully in 2757ms                    > Listening at http://localhost:8080

项目启动完成,查看控制台输出,进行访问:

五,vue init webpack报错解决

1,使用vue init webpack创建Vue项目脚手架报错

bogon:~ Brave$ vue init webpack test/usr/local/lib/node_modules/vue-cli/bin/vue-init:60let template = program.args[0]^^^SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode    at exports.runInThisContext (vm.js:53:16)    at Module._compile (module.js:404:25)    at Object.Module._extensions..js (module.js:432:10)    at Module.load (module.js:356:32)    at Function.Module._load (module.js:311:12)    at Function.Module.runMain (module.js:457:10)    at startup (node.js:136:18)    at node.js:972:3

2,查看node版本

bogon:~ Brave$ node -v

4,升级node为最新稳定版:

bogon:~ Brave$ sudo n stable    install : node-v9.2.1      mkdir : /usr/local/n/versions/node/9.2.1      fetch : https://nodejs.org/dist/v9.2.1/node-v9.2.1-darwin-x64.tar.gz######################################################################## 100.0%   installed : v9.2.1

如果无法执行n模块,强制重新安装:

npm install -g n --force

5,重新创建项目脚手架,成功

bogon:~ Brave$ vue init webpack test? Project name (test)

六,结尾

这一篇简单的介绍了如何使用Vue-cli创建Vue工程脚手架这部分其实涉及到了很多内容,对于这个脚手架需要进行诸多的讲解例如:工程目录,工程中node相关的API和配置,webpack配置和插件及优化等等目前介绍Vue-cli主要是为了便于继续后续的介绍,是之更加贴近于实际开发如:.Vue单文件的使用,Vue-router的集成,Vuex的集成和使用等等