- 创建项目
- 添加单元测试
- eslint代码检测
- 在vue中如何关闭eslint的代码检测
- 添加UI库Vux
- 路由 Vue Router
- 状态管理 Vuex
创建项目
使用 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 testyarn run v1.22.4$ jest PASS test/hello.test.js √ 输出hello world (2 ms)Test Suites: 1 passed, 1 totalTests: 1 passed, 1 totalSnapshots: 0 totalTime: 2.001 sRan 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.jsonE:\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.jsmodule.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 stateaction.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）
// 提交motationimport { 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')` }) }}// 提交actionimport { 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 也有命名空间等概念
原文转载：http://www.shaoqun.com/a/481452.html
epa认证：https://www.ikjzd.com/w/1769
wario：https://www.ikjzd.com/w/887
mymall：https://www.ikjzd.com/w/1050
目录创建项目添加单元测试eslint代码检测在vue中如何关闭eslint的代码检测添加UI库Vux路由VueRouter状态管理Vuex创建项目使用vue-cli快速搭建项目结构，关于vue-cli的更多用法，请阅读官方说明！vue-cli官方文档创建项目vuecreatecloud-film-vue安装依赖vscode中，在终端打开文件夹，然后npminstall或yarnnpminstall
heap：https://www.ikjzd.com/w/2012
达方物流：https://www.ikjzd.com/w/2562
广东乳源大峡谷适合哪些人群？：http://tour.shaoqun.com/a/2735.html
2020年国庆去杨梅坑怎么样？杨梅坑好玩吗？：http://tour.shaoqun.com/a/247.html
2020南沙湿地公园春节活动?广州南沙湿地公园春节候鸟季开：http://tour.shaoqun.com/a/73236.html
没有评论:
发表评论