【工程化】vue-cli4从零开始搭建Vue项目

7,430 阅读6分钟

前言


 记录一下使用vue-cli4从零开始搭建Vue项目,并进行一些工具的封装。希望能够通过这个过程,了解一个Vue项目所用到的知识,整合成一个体系。

安装脚手架vue-cli4


 现在Vue项目的搭建都是使用脚手架vue-cli一键搭建的,不同版本的vue-cli生成的项目目录是不一样的。目前vue-cli已经更新到了4.3.1版本(2020/4/25),这里注意一下vue-cli从3.0版本后,npm上包的名字由vue-cli改成了@vue/cli

 那么如何查看vue-cli的版本号呢?使用vue --version命令。没错,你没看错,是vue命令。不是我们理所当然以为的vue-cli

 这次新建项目使用最新版本的vue-cli,我电脑安装的还是3.5版本,所以先要更新一下。

sudo cnpm i -g @vue/cli

新建Vue项目


 安装好了vue-cli后,就开始新建项目了。

 运行vue create <项目名>命令,会出现一些preset配置,根据需要进行选择,或者无脑enter。我这里默认选择使用了VuexVue-Router,对于业务项目来说,这两个插件是必备的。

关联本地仓库到远程仓库


 通过vue-cli新建的项目已经自动初始化为git仓库了,接下来需要我们将本地仓库关联到远程仓库。

  • 首先在代码托管网站新建一个仓库,例如github或者码云,复制仓库地址。如:https://github.com/Yourbones/vue-project.git
  • 然后在本地仓库中打开命令行,输入git remote add origin <远程仓库地址>,回车,就成功关联到了远程库。然后git push就可以将代码推到远程了。

配置eslint规范

 eslint是用来规范代码的,无论是团队开发还是个人开发,使用eslint规范代码是很有必要的。下面就是我找到的一个规范,写在根目录下面的.eslintrc.js文件中。

配置不同的开发环境和webpack

 在开发过程中,我们经常遇到不同的开发环境,例如最普遍的:test环境,pre环境等等。不同的开发环境,使用不同的接口地址。那么在打包时,如何知道是不同的环境呢?答案是通过配置环境文件,在运行打包命令时,传入不同的--mode <环境名>,结合根目录下面的.env.<环境名>文件,自动会将process.env环境变量设置为环境名。

"scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "compile:test": "vue-cli-service build --mode test",
    "compile:pre": "vue-cli-service build --mode pre",
    "compile:prod": "vue-cli-service build --mode prod",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  }

环境文件

环境文件内容  关于环境变量的知识,可以参考vue-cli4的文档,cli.vuejs.org/zh/guide/mo…

 另外关于webpack,vue-cli4做了大大的改变,没有之前的webpack.config.js文件了。统统整合到了根目录下面的vue.config.js

Vue-Router路由设置


 Vue项目现在基本都是使用VueRouter进行路由管理,vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。例如https://www.baidu.com/#/userInfo,因为对于浏览器来说,「#」后面的路径改变,不认为是URL改变,从而达到不刷新页面的目的。 如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

​ 不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。

​ 所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

​ 因为routes后面一定会越来越多的,所以我们一开始就把routes单独抽出来,放到同级目录下。新建routes.js文件,将路由关系放进去。

​ 另外需要设置导航守卫,在路由跳转之前进行一些逻辑处理,如权限判断等等。

Vuex配置


 项目刚开始时,Vuex配置保持不变,等到项目状态管理复杂之后,在考虑进行模块的分割。

二次封装HTTP请求


这一步算是很重要,项目对外的通信就是通过HTTP请求与后端进行的。但是一般项目都有着自己对于请求的处理:如拦截请求做一些header配置,拦截响应,封装错误状态。所以我们需要对于HTTP请求做一层封装。

​ 那么问题来了,使用什么库来进行HTTP请求呢?现在Vue项目中有两种HTTP请求方式,一种是浏览器自带的fetch,另一种就是axios库。两者各有优缺点,fetch现在已经是浏览器内置的请求方法,不需要额外安装npm包。但是fetch默认不携带cookie,需要手动设置。axios是基于Promise的第三方请求库,广泛应用于Vue项目中。但是axios对于返回状态码400和500系列的请求,默认也是从成功的,需要手动进行状态码的判断与错误封装。

​ 我采用的是axios,原因是经历的很多项目都是用的axios,经验足一点。在axios.js文件里,二次封装POST、GET等请求方法。然后将整个文件作为模块导出,在入口文件main.js中,将axios整个模块挂载到Vue.prototype上面,自此在之后的每个.vue文件中就可以直接使用axios封装好的请求方法了。

添加全局样式文件

 全局样式文件是很重要的,对于项目来说,最基础的reset.css文件用于统一不同浏览器的样式。此外,如果你想要抽出公用的样式表,也可以存放在src/style文件夹里面。

添加工具方法


 我们经常会遇到全局都要使用的一些工具方法,例如判断是否是微信环境,格式化价格数字等等。我们可以积累平时业务上遇到的方法,统一存在于src/utils文件夹里面,使用时在引入即可。

添加全局过滤器

 与工具方法类似,我们也需要一些通用的全局过滤器来格式化字符串。

移动端适配px->vw

 使用vw可以很好地替代rem进行样式的书写,其中需要一个插件自动将px转为vw,这不需要前端自行转化px,很是推荐。

使用组件库

 组件库对于大型业务是很必要的,具体使用安装参考组件库官方文档即可,这里推荐Vant-ui和Cube-ui。

仓库地址

 上面只是介绍了主要需要考虑的点,具体代码内容在我的仓库里,其中每个commit的说明都表示了所做的每一步事情。天下难事,必作于易、天下大事,必作于细。与君共勉!