Vue项目搭建

序

随着智能设备的普及以及4G网络时代的到来，大家越发发重视用户的视觉、交互体验，前端工程也越发庞大，所以大厂们越发关注前端的工程化怎么做，然后gulp、webpack等前端工程化的工具陆续出现；前端的开发效率能否再提升，然后包管理工具 bower、npm(Node Package Manager)陆续出现；前端是否能有自己的一套开发环境，迅速配置好项目的工程化工作（启动、热更新、打版本号、编译less、sass、es6、压缩、混淆等），于是有了对应的脚手架工具、node 环境。

一. npm的安装

NPM是会随同NodeJS一起安装的，所以到官网下载对应平台的node，一路“下一步”安装即可。下载地址
验证是否安装成功

$ npm -v

出现版本号，说明成功。

二. 脚手架的安装

$ npm install vue-cli -g

-g :代表全局安装。如果安装失败，一般是网络问题,可以尝试使用 cnpm 来进行安装。
验证是否安装成功，注意这里的V是大写的。

vue -V

出现版本号，说明成功

三.初始化项目

vue init

初始化项目提示.png

这里提示了，初始化项目的格式。
其中：

：表示模板名称，vue-cli官方为我们提供了6种模板，

可以看下官方的说法：大概了解下每种模板的特点。

• 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.

• 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，是一个集成webpack打包工具+Vue-loader 功能最为全面的项目模板，其中涵盖热刷新和代码检查以及css扩展。

：表示项目名称。

在实际开发中，一般我们都会使用webpack这个功能完备齐全的模板，那接下来在命令行输入以下命令：

vue init webpack myos

紧接着，会依次出现：项目名称、描述、作者、是否使用vue-router、是否使用ESlint检查代码、是否使用单元测试等，每询问你一句对应写好回车即可。

项目配置.png

耐心等待，直到出现：

项目安装成功.png

展开说下上面的配置项，如果做单页面应用，这里肯定是要使用路由模块(vue-router)的，所以选择 Yes。另外ESLint代码检查，看个人习惯，如果你习惯有工具帮你做代码格式检查，比如这句后边少个分号那里空格不对等，那就选择yes。单元测试一般工程排期都比较紧凑，可能没有时间写单元测试，所以选择No 即可。

四.启动项目

经过步骤三的项目初始化后，一套完整的项目架子已经安装到你本地了。打开对应的项目目录，在package.json所在层级，调出cmd面板，输入：

$ npm run dev

等待项目完成编译过程后，出现：

编译完毕.png

此时打开浏览器，访问：http://localhost:8080
出现：

表明Vue脚手架搭建成功.png

说明Vue工程完成了基本的搭建过程。接下来你可以根据自己的项目需要、业务、功能等规划调整你的项目架子。