vue-cli构建vue项目

vue-cli是快速构建vue单页应用的脚手架。在学习了官网的教程，对vue有个初步了解之后，可以开始使用脚手架搭建，搭建过程如下

1.先安装node，在命令行中输入node -v，出现如下图所示，表明安装成功

验证node是否安装成功

2.使用npm全局安装vue-cli，在命令行中输入下面命令

npm install -g vue-cli

3.命令行切换到想创建项目的路径，输入下面命令，创建项目(firstvue是项目名称)

vue init webpack firstvue

创建项目时，会出现下图中的命令，前四项，直接按enter键使用默认的即可，需要修改的话也可以自己改。

 Install vue-router？输入"y"。这个是官方路由，单页应用中需要使用到的 

Use ESLint to lint your code?输入"n"。如果想使用ESLint输入"y"

构建完成

4.cd firstvue进入到项目目录，执行下面命令安装项目依赖

npm install

5.执行下面命令查看构建的默认页面

npm run dev

至此根据脚手架构建vue项目已经完成。

构建项目结构每个文件的说明，可参考下面这篇文章

vue-cli构建项目结构解析

6.执行下面命令，打包页面

npm run build

打包

打包完成后，会在根目录下生成一个dist文件夹，这是需要部署的文件，在打包好的最底下为们会看到一个黄色的警告。当直接使用浏览器打开文件时，浏览器控制台会报错

报错

解决该问题，将打包的绝对路径改为相对路径，在config\index.js文件中的build对象，将assetsPublicPath中的“/”，改为“./”即可，如果不想显示提示，可以在build\build.js将这两句的提示信息删掉或注释掉，再执行npm run build然后浏览器打开index.html即可。