Vue项目框架搭建(不定时更新)

  • A+
所属分类:.NET技术
摘要

使用 vue-cli 快速搭建项目结构,关于vue-cli的更多用法,请阅读官方说明 !vue-cli官方文档

创建项目

使用 vue-cli 快速搭建项目结构,关于vue-cli的更多用法,请阅读官方说明 !vue-cli官方文档

  • 创建项目
vue create cloud-film-vue 
  • 安装依赖

vscode中,在终端打开文件夹,然后 npm installyarn

npm install 或 vue add 

yarn 
  • 启动项目
yarn run dev 

npm run dev 

以上是开发环境下,若是生产环境,dev换成build

添加单元测试

更多jest用法,阅读官方文档 !jest官方

  • 根目录下(与src文件夹同级目录)新建 test文件夹
  • 安装jest
yarn add jest 或 npm install --save-dev jest 
  • 配置jest启动方式

在package.json中的 “srcipts”:{} 中添加jest的启动方法,如下:

"scripts": {     //其他指令     "test": "jest"  //test指令   }, 
  • 在test文件夹中添加测试文件 hello.test.js

测试文件必须以xxx.test.js的方式命名,.test.js的文件,无论在项目中的什么位置,都会被识别为测试文件,并在执行测试单元测试的时候被执行。

编写如下代码:

const returnHelloWorld = () => {     return 'hello world' } test('输出hello world ', () => {     expect(returnHelloWorld()).toBe('hello world') }) 
  • 运行测试用例hello.test.js
yarn test 或 npm run test 

执行全部测试用例。若要执行单个测试用例,则在 test后指定用例名即可,如:

yarn test hello.test.js 或 npm run test hello.test.js 
  • 运行结果
PS E:ProjectCloudFilmVueVersion-PracticecloudFilm-vuecloud-film-vue> yarn test yarn run v1.22.4 $ jest  PASS  test/hello.test.js   √ 输出hello world  (2 ms) Test Suites: 1 passed, 1 total Tests:       1 passed, 1 total Snapshots:   0 total Time:        2.001 s Ran all test suites. Done in 3.13s. 

如上,显示测试通过。

eslint代码检测

  • 安装
npm install eslint --save-dev 
  • 初始化eslint文件
./node_modules/.bin/eslint --init 

不要怀疑,就是这个指令。

运行指令后,会让你回答一系列问题,你根据自己的需求认真选择选项,稍后会根据你的选择生成对应的代码检测规则。

选择编码风格时,选 standard,这是我们团队的规范

  • 运行检测文件,检测代码格式
./node_modules/.bin/eslint yourfile.js 

运行如上命令,会检查你的代码,列出格式错误的地方。yourfile.js是你要检测的文件,如main.js ,就是检测mian.js的代码格式问题。

检测结果:

PS E:ProjectCloudFilmVueVersion-PracticecloudFilm-vuecloud-film-vue> ./node_modules/.bin/eslint .eslintrc.json  E:ProjectCloudFilmVueVersion-PracticecloudFilm-vuecloud-film-vue.eslintrc.json    1:1   error  Expected an assignment or function call and instead saw an expression  no-unused-expressions    2:1   error  Expected indentation of 2 spaces but found 4                           indent    2:5   error  Unnecessarily quoted property 'env' found                              quote-props    2:5   error  Strings must use singlequote                                           quotes    3:1   error  Expected indentation of 4 spaces but found 8                           indent    3:9   error  Unnecessarily quoted property 'browser' found                          quote-props    3:9   error  Strings must use singlequote                                           quotes    4:1   error  Expected indentation of 4 spaces but found 8                           indent    4:9   error  Unnecessarily quoted property 'es6' found                              quote-props    4:9   error  Strings must use singlequote                                           quotes    5:1   error  Expected indentation of 2 spaces but found 4                           indent    6:1   error  Expected indentation of 2 spaces but found 4                           indent    6:5   error  Unnecessarily quoted property 'extends' found                          quote-props    6:5   error  Strings must use singlequote                                           quotes    7:1   error  Expected indentation of 4 spaces but found 8                           indent    7:9   error  Strings must use singlequote                                           quotes    8:1   error  Expected indentation of 4 spaces but found 8                           indent    8:9   error  Strings must use singlequote                                           quotes    9:1   error  Expected indentation of 2 spaces but found 4                           indent   10:1   error  Expected indentation of 2 spaces but found 4                           indent   10:5   error  Unnecessarily quoted property 'globals' found                          quote-props   10:5   error  Strings must use singlequote                                           quotes   11:1   error  Expected indentation of 4 spaces but found 8                           indent   11:9   error  Unnecessarily quoted property 'Atomics' found                          quote-props   11:9   error  Strings must use singlequote                                           quotes   11:20  error  Strings must use singlequote                                           quotes   12:1   error  Expected indentation of 4 spaces but found 8                           indent   12:9   error  Unnecessarily quoted property 'SharedArrayBuffer' found                quote-props   12:9   error  Strings must use singlequote                                           quotes   12:30  error  Strings must use singlequote                                           quotes   13:1   error  Expected indentation of 2 spaces but found 4                           indent   14:1   error  Expected indentation of 2 spaces but found 4                           indent   14:5   error  Unnecessarily quoted property 'parserOptions' found                    quote-props   14:5   error  Strings must use singlequote                                           quotes   15:1   error  Expected indentation of 4 spaces but found 8                           indent   15:9   error  Unnecessarily quoted property 'ecmaVersion' found                      quote-props   15:9   error  Strings must use singlequote                                           quotes   16:1   error  Expected indentation of 4 spaces but found 8                           indent   16:9   error  Unnecessarily quoted property 'parser' found                           quote-props   16:9   error  Strings must use singlequote                                           quotes   16:19  error  Strings must use singlequote                                           quotes   17:1   error  Expected indentation of 4 spaces but found 8                           indent   17:9   error  Unnecessarily quoted property 'sourceType' found                       quote-props   17:9   error  Strings must use singlequote                                           quotes   17:23  error  Strings must use singlequote                                           quotes   18:1   error  Expected indentation of 2 spaces but found 4                           indent   19:1   error  Expected indentation of 2 spaces but found 4                           indent   19:5   error  Unnecessarily quoted property 'plugins' found                          quote-props   19:5   error  Strings must use singlequote                                           quotes   20:1   error  Expected indentation of 4 spaces but found 8                           indent   20:9   error  Strings must use singlequote                                           quotes   21:1   error  Expected indentation of 4 spaces but found 8                           indent   21:9   error  Strings must use singlequote                                           quotes   22:1   error  Expected indentation of 2 spaces but found 4                           indent   23:1   error  Expected indentation of 2 spaces but found 4                           indent   23:5   error  Unnecessarily quoted property 'rules' found                            quote-props   23:5   error  Strings must use singlequote                                           quotes   24:1   error  Expected indentation of 2 spaces but found 4                           indent   25:2   error  Newline required at end of file but not found                          eol-last  ✖ 59 problems (59 errors, 0 warnings)   58 errors and 0 warnings potentially fixable with the `--fix` option. 

检测结果:59个问题格式

在vue中如何关闭eslint的代码检测

  • 在项目根目录下增加 vue.config.js,内容为:
// vue.config.js module.exports = {     lintOnSave: false } 

添加UI库Vux

UI库可以使用Vux,还比较火,更多Vux相关,请查看官方文档 !Vux官方文档

  • 安装vux
npm install vux --save 或 yarn add vux //安装 yarn upgrade vux // 更新 
  • 安装和配置vux-loader

vux2必须配合vux-loader使用,并配置build/webpack.base.conf.js //新版脚手架可能不用配这个

npm install vux-loader --save-dev 
  • 安装less-loader(用以正确编译less源码)
npm install less less-loader --save-dev 
  • 安装yaml-loader以进行语言文件读取
npm install yaml-loader --save-dev 
  • 使用

以下是从官方文档中copy的一段代码,展示效果如下图:

<template>   <div>     <v-chart :data="data" prevent-default>       <v-scale x :tick-count="3" />       <v-tooltip :show-item-marker="false" show-x-value />       <v-line />     </v-chart>   </div> </template>  <script> import { VChart, VTooltip, VLine, VScale } from 'vux'  export default {   components: {     VChart,     VTooltip,     VLine,     VScale   },   data () {     return {       data: [         { date: '2017-06-05', value: 116 },         { date: '2017-06-06', value: 129 },         { date: '2017-06-07', value: 135 },         { date: '2017-06-08', value: 86 },         { date: '2017-06-09', value: 73 },         { date: '2017-06-10', value: 85 },         { date: '2017-06-11', value: 73 },         { date: '2017-06-12', value: 68 },         { date: '2017-06-13', value: 92 },         { date: '2017-06-14', value: 130 },         { date: '2017-06-15', value: 245 },         { date: '2017-06-16', value: 139 },         { date: '2017-06-17', value: 115 },         { date: '2017-06-18', value: 111 },         { date: '2017-06-19', value: 309 },         { date: '2017-06-20', value: 206 },         { date: '2017-06-21', value: 137 },         { date: '2017-06-22', value: 128 },         { date: '2017-06-23', value: 85 },         { date: '2017-06-24', value: 94 },         { date: '2017-06-25', value: 71 },         { date: '2017-06-26', value: 106 },         { date: '2017-06-27', value: 84 },         { date: '2017-06-28', value: 93 },         { date: '2017-06-29', value: 85 },         { date: '2017-06-30', value: 73 },         { date: '2017-07-01', value: 83 },         { date: '2017-07-02', value: 125 },         { date: '2017-07-03', value: 107 },         { date: '2017-07-04', value: 82 },         { date: '2017-07-05', value: 44 },         { date: '2017-07-06', value: 72 },         { date: '2017-07-07', value: 106 },         { date: '2017-07-08', value: 107 },         { date: '2017-07-09', value: 66 },         { date: '2017-07-10', value: 91 },         { date: '2017-07-11', value: 92 },         { date: '2017-07-12', value: 113 },         { date: '2017-07-13', value: 107 },         { date: '2017-07-14', value: 131 },         { date: '2017-07-15', value: 111 },         { date: '2017-07-16', value: 64 },         { date: '2017-07-17', value: 69 },         { date: '2017-07-18', value: 88 },         { date: '2017-07-19', value: 77 },         { date: '2017-07-20', value: 83 },         { date: '2017-07-21', value: 111 },         { date: '2017-07-22', value: 57 },         { date: '2017-07-23', value: 55 },         { date: '2017-07-24', value: 60 }       ]     }   } } </script>  

Vue项目框架搭建(不定时更新)

路由 Vue Router

Vue路由使用 Vue router,具体使用方法详情,参见 Vue Router中文文档

  • 安装
npm install vue-router 
  • 使用

具体使用见官方文档,内容较多,暂不记录

需要显式的通过Vue.use()来安装VueRouter:

import Vue from 'vue' import VueRouter from 'vue-router'  Vue.use(VueRouter) 

状态管理 Vuex

Vue使用Vuex进行状态管理,其核心思想同redux类型,详情参见 Vuex中文文档

  • 安装
npm install vuex --save 或 yarn add vuex 
  • 使用

需要显式的通过Vue.use()来安装Vuex:

import Vue from 'vue' import Vuex from 'vuex'  Vue.use(Vuex) 
  • 在项目中使用

第一步:在src下新建文件夹 store,在文件夹下新建4个文件

+ index.js + state.js + action.js + motation.js 

第二步:在 state.js action.js motation.js中分别编写对应的代码:

state.js

const state = {   name: 'cherish',   age: 26,   sex: 'male',   birthday: '1994-10-22' } export default state 

action.js

export default {   // 这里写对应的代码  或参照 state.js的写法也可 } 

motation.js

export default {   // 这里写对应的代码  或参照 state.js的写法也可 } 

第三步:在 index.js中引入以上三个文件,引入Vuex,创建store

import mutation from './mutation' import action from './action' import state from './state' import Vuex from 'vuex' // Vuex 状态管理的完整使用模式 Vue.use(Vuex) const store = new Vuex.Store({   state,   mutation,   action })  export default store 

第四步:在组件中提交 motationaction

在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store

// 提交motation import { mapMutations } from 'vuex'  export default {   // ...   methods: {     ...mapMutations([       'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`       // `mapMutations` 也支持载荷:       'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`     ]),     ...mapMutations({       add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`     })   } } 
// 提交action import { mapActions } from 'vuex'  export default {   // ...   methods: {     ...mapActions([       'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`        // `mapActions` 也支持载荷:       'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`     ]),     ...mapActions({       add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`     })   } } 

第五步:对于比较复杂的项目,可以将store模块化,最后在一个总的index.js组合起来

具体实现参见Vuex核心概念——Modules

这有点类似于 React 中的 dva.js 也有命名空间等概念