Vue project framework construction (updated from time to time)

Time:2020-10-25

Create project

Use Vue cli to quickly build the project structure. For more usage of Vue cli, please read the official instructions!Vue cli official document

  • Create project
vue create cloud-film-vue
  • Installation dependency

In vscode, open the folder in the terminal, and thennpm installoryarn

npm install
or
vue add

or

yarn
  • Start project
yarn run dev

or

npm run dev

The above is the development environment, if the production environment, dev is replaced by build

Add unit test

For more jest usage, read the official documentation!Jest official

  • Create a new directory in the root directory (at the same level as the SRC folder)testfolder
  • installjest
yarn add jest
or
npm install --save-dev jest
  • Configure jest startup mode

stay package.json Add the start method of jest in {} as follows:

"scripts": {
    //Other instructions
    "Test": jest // test instruction
  },
  • Add the test file to the test folderhello.test.js

The test file must be xxx.test.js Named in the way of test.js The file, no matter where it is in the project, is identified as a test file and is executed when the test unit test is executed.

Write the following code:

const returnHelloWorld = () => {
    return 'hello world'
}
Test ('output Hello World ', () = >{
    expect(returnHelloWorld()).toBe('hello world')
})
  • Run test cases hello.test.js
yarn test
or
npm run test

Execute all test cases. If you want to execute a single test case, you can specify the case name after the test, for example:

yarn test hello.test.js
or
npm run test hello.test.js
  • Operation results
PS E:\Project\CloudFilmVueVersion-Practice\cloudFilm-vue\cloud-film-vue> yarn test
yarn run v1.22.4
$ jest
 PASS  test/hello.test.js
  √ output 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.

As shown above, the test passed.

Eslint code detection

  • install
npm install eslint --save-dev
  • Initializing the eslint file
./node_modules/.bin/eslint --init

No doubt, that’s the order.

After running the instructions, you will be asked to answer a series of questions. You can carefully select the options according to your own needs. Later, the corresponding code detection rules will be generated according to your choice.

When choosing coding style, choose standard, which is the standard of our team

  • Run test file, check code format
./node_modules/.bin/eslint yourfile.js

Running the above command will check your code and list the wrong formatting. yourfile.js Is the file you want to test, such as main.js It’s testing mian.js Code format problem.

Test results:

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.

Results: 59 question formats

How to turn off code detection of eslint in Vue

  • Add in project rootvue.config.jsThe contents are as follows:
// vue.config.js
module.exports = {
    lintOnSave: false
}

Add UI library vux

UI library can use vux, but also more popular, more vux related, please check the official documents!Official documents of vux

  • Installing vux
npm install vux --save
or
Yarn add vux // install
Yarn upgrade vux // update
  • install and configurevux-loader

Vux2 must be used with vux loader and build must be configured/ webpack.base.conf . JS / / the new scaffold may not be equipped with this one

npm install vux-loader --save-dev
  • installless-loader(to compile less source code correctly)
npm install less less-loader --save-dev
  • installyaml-loaderTo read the language file
npm install yaml-loader --save-dev
  • use

The following is a code copy from the official document. The display effect is as follows:

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 }
      ]
    }
  }
}

image-20200930170639098

Route Vue router

Vue router is used for Vue routing. Please refer toChinese documents of Vue router

  • install
npm install vue-router
  • use

See the official documents for specific use, with more contents and no record for the time being

It needs to be explicitly passedVue.use()To installVueRouter:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

State management vuex

Vue uses vuex for state management. Its core idea is the same as redux. For details, please refer toVuex Chinese documents

  • install
npm install vuex --save
or
yarn add vuex
  • use

It needs to be explicitly passedVue.use()To installVuex:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
  • Use in projects

Step 1: insrcNew folder understore, create 4 new files under the folder

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

Step 2: instate.js action.js motation.jsWrite the corresponding code in the

state.js

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

action.js

export default {
  //Write the corresponding code or reference here state.js You can write it in the same way
}

motation.js

export default {
  //Write the corresponding code or reference here state.js You can write it in the same way
}

Step 3: inindex.jsThe above three documents are introduced in theVuex, createstore

import mutation from './mutation'
import action from './action'
import state from './state'
import Vuex from 'vuex'
//Complete usage mode of vuex state management
Vue.use(Vuex)
const store = new Vuex.Store({
  state,
  mutation,
  action
}) 
export default store

Step 4: submit in componentmotationoraction

Using in componentsthis.$store.commit('xxx')Submit mutation, or usemapMutationsHelper functions map methods in a component tostore.commitCall (needs to be injected at the root nodestore

//Submit motion
import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // change` this.increment () 'maps to' this$ store.commit ('increment')`
      //'mapmutations' also supports loads:
      'incrementby' // will` this.incrementBy (amount)'maps to ` this$ store.commit ('incrementBy', amount)`
    ]),
    ...mapMutations({
      Add: 'increment' // add` this.add () 'maps to' this$ store.commit ('increment')`
    })
  }
}
//Submit action
import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // change` this.increment () 'maps to' this$ store.dispatch ('increment')`

      //'mapactions' also supports payload:
      'incrementby' // will` this.incrementBy (amount)'maps to ` this$ store.dispatch ('incrementBy', amount)`
    ]),
    ...mapActions({
      Add: 'increment' // add` this.add () 'maps to' this$ store.dispatch ('increment')`
    })
  }
}

Step 5: for complex projects, you canstoreModularity, finally in a totalindex.jsPut it together

Please refer toVuex core concept modules

It’s sort of like thisIn react dva.jsThere are also concepts such as the namespace