Basic steps to build a project using the VUE framework

ps: Friends who are new to the Vue pit may not know what resources to use for an independent project. I hope this essay will be helpful to you.

Step 1: Refer to the official documentation of Vue and create a Vue project

# Install vue-cli globally
$ npm install --global vue-cli (If there is a vue project on the computer and it can run normally, it basically means that this step has been installed globally, then you can skip this step and perform the second step, if the second step is executed Time to report the error of the first step, and then execute the first step)
# Create a new project based on the webpack template
$ vue init webpack my-project
# switch to the new folder
$ cd my-project
# Install the package in the node-modules module 
(I encountered a pit in this area before (the npm install command was executed in the node-modeles folder at that time, which caused the package to be unable to be downloaded normally, friends, don't step on the pit) , execute npm install must be outside the node-modules folder,)
npm install / cnpm install (to install cnpm)
# run the vue project
$ npm run dev

Step 2: Resources that generally need to be installed (if the project has no requirements for the resource version, the downloaded resources are generally the latest)

"axios": "Interface Request",
"babel-polyfill": "Parsing the latest grammar",
"fastclick": "mobile click",
"qrcanvas-vue": "QR code",
"swiper": "Carousel",
"vue": "vue framework",
"vue-router": "Route Jump",
"vuex": "state manager", 
ps: the text behind the resource is my own understanding, if there is any problem, please help me to correct it.

Step 3: Some resources need to be modified or created and imported

1. Axios needs to create a folder to encapsulate get or post requests (cross-domain is not allowed)

2, fastclick needs to write this code in main.js

// fix click 300ms delay
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', () => {
FastClick.attach(document.body)
}, false)
}

3, swiper needs to import swiper.min.css to use this plugin

4, vuex needs to create a folder store, create a store.js file in it, and write this code

import View from 'view'
import Vuex from 'vuex'
const sessionStoragePlugin = store => {
store.subscribe((mutation, state) => {
Object.keys(state).forEach((item, index) => {
window.sessionStorage.setItem(item, JSON.stringify(state[item]))
})
})
}
Vue.use(Vuex)
export default new Vuex.Store({
plugins: [sessionStoragePlugin]
})
Finally, the store needs to be mounted in the main.js instance

new View({
  el: '#app',
  router,
  store,
  components: {
    App
  },
  template: '<App/>'
})

Basic steps to build a project using the VUE framework

Guess you like