零基础教你搭建Vue项目

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

第一步，安装node环境

下载一个node安装包， 然后安装到电脑上就ok了， 如果弄得版本过低， window系统上就需要重新下载一个最新的node安装包， 然后重新安装到原安装路径下。

第二步， 安装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://172.16.124.43:8088',

        changeOrigin: true,

        pathRewrite: {

            '^/api': ''

        }

    }

}

第七步，写demo页面测试

1） 随便写一个demo组件

2） 创建一个初始化样式的css文件（公用的静态资源最好直接放在static文件夹中，在index.html直接引入）。

3） 打包项目，浏览打包之后的项目看能否正常展示（主要是打包后路径有没有出错的。如果这个时候部分文件或者全部文件报错了， 可以修改assetsPublicPath字段的值）

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

感谢你读到这里，觉得文章还可以的话，手动将公众号设为星标，这样就能第一时间看到我们的内容，感恩~。希望对大家的实际工作有所帮助，不足之处，感谢指正。