Vue项目框架搭建（不定时更新）

CherishTheYouth

发布于 2020-10-28 11:40:49

8730

发布于 2020-10-28 11:40:49

文章被收录于专栏：Vue技术实践Vue技术实践

创建项目

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

创建项目

vue create cloud-film-vue

安装依赖

vscode中，在终端打开文件夹，然后 npm install或yarn

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:\Project\CloudFilmVueVersion-Practice\cloudFilm-vue\cloud-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:\Project\CloudFilmVueVersion-Practice\cloudFilm-vue\cloud-film-vue> ./node_modules/.bin/eslint .eslintrc.json

E:\Project\CloudFilmVueVersion-Practice\cloudFilm-vue\cloud-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 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

第四步：在组件中提交 motation 或 action

在组件中使用 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组合起来