Vue项目搭建手把手教学

        Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js，了解Vue.js的开发流程，并进一步理解如何通过Vue.js来构建一个中大型的前端项目，同时做好相应的部署与优化工作。

        今天我要讲一下我的第一个vue脚手架项目的搭建。可能很多人会想， vue脚手架有什么可说的呢， 一个vue init命令就完事了。话虽如此，可是一个完整的项目不应该只有命令。话不多说，直接正文吧。

第一步，安装node环境

需要node.js的版本最少8.9.4及以上（很重要），具体怎么安装我就不讲了，这类教程网上一大把，别忘了npm的淘宝镜像源。想看自己的node版本是多少的话，就打开命令行输入

node -v

第二步， 安装vue

npm install vue

第三步， 安装vue-cli

npm install --global vue-cli

第四步， 初始化一个vue项目

vue list
vue init webpack project

可以再初始化之前先使用vue list命令查看一下可以使用的vue脚手架模板，模板类型主流的有这几种：

browserify—全功能的Browserify + vueify，包括热加载，静态检测，单元测试
browserify-simple—一个简易的Browserify + vueify，以便于快速开始。
webpack—全功能的Webpack + vueify，包括热加载，静态检测，单元测试
webpack-simple—一个简易的Webpack + vueify，以便于快速开始。
pwa —渐进式网页应用(深度了解:https://blog.csdn.net/dadadeganhuo/article/details/78195634)

我的项目用的模板是webpack，project是项目名称，也是项目开发的文件夹
是不是以为到这里就应该执行一下npm install就结束了？ no！一个完整项目的搭建还要思考很多

第五步， 项目开发中需要用到的组件和插件，以及辅助工具的准备
打开webpack.json, 在原来devDependencies的基础上增加route、vuex、json-server、axios、less。 添加完以后，执行

npm install

这个时候可能会报错： npm ERR! code EINTEGRITY……
报错处理执行下面几步:
npm audit fix //扫描项目中的漏洞并自动将任何兼容的更新安装到易受攻击的依赖项
npm audit fix -force //已audit fix安装semver，主要更新到顶层的依赖，不只是semver兼容的
npm audit fix //扫描项目中的漏洞并显示详细信息，而无需修复任何内容
这个时候vue开发环境就安装完了。

第六步，根据项目需要，重新修改项目架构
1.项目开发的架构需要按照装完的样子去开发吗？ 肯定是不可以的。
从项目的长期维护角度出发。 http请求的处理和vuex数据的处理以及router的管理最好和模板分开并且统一管理。于是我建了一个api文件夹， 一个router文件夹，一个store文件夹。 为route组件和公用小组件也分别建文件夹分开管理
2.试一下http请求是否正常， 那么就随便写一个http请求， mock一些数据。 配置json-server文件，启动看一下是否正常。
3.开发环境指定http请求地址： 需要在config/index.js里配置proxyTable的参数.
配置项是这样的

proxyTable: {
'/api': {
target: 'http://192.168.88.123:8088',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}

第七步，写demo页面测试
1） 随便写一个demo组件
2） 创建一个初始化样式的css文件（公用的静态资源最好直接放在static文件夹中，在index.html直接引入）。
3） 打包项目，浏览打包之后的项目看能否正常展示（主要是打包后路径有没有出错的。如果这个时候部分文件或者全部文件报错了， 可以修改assetsPublicPath字段的值）

测试开发和打包后页面正常展示, 这个时候一个项目的搭建就结束了。

结语

别着急，才刚开始，这个只是安装及运行起来你的项目，后续章节我会继续由浅入深的写下去，想看的可以关注我，今天先下班了。。