Using family buckets to build VUE projects is now both time and effort saving, combined with the WebPack static module packer, it is a blast.

Global installation scaffolding vuE-CLI

npm install -g vue-cli

Create a new project based on the WebPack template

vue init webpack Myproject

  • Myproject is the project name, which can be changed according to project requirements.
  • Webpack creation can be done on the command line with the enter key, but there is one ESlint feature that is recommended to be turned off. It is a code specification principle, although it is beautify for code, but the rigor has seriously affected the coding speed, so it is not recommended to use it. In fact, you can use the code formatting plug-in after coding Formatting is also useful.

Access the created project from the command line

cd Myproject

Iv. Local starter server, test whether the project is OK

npm run dev

  • Open the localhost address given by the command line in your browser, for example :http://localhost:8080. When you see the vue icon, congratulations!

5. For better project development, you can install the required plug-in installation package

1. Installelement-ui(UE-BASED UI library)

NPM I element-ui-s adds code to main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false;
Vue.use(ElementUI)

new Vue({
	el: '#app',
	router,
	store,
	components: { App },
	template: '<App/>'
})
Copy the code

2. Installaxios(VUE authors recommend using Ajax to interact with background data.)

NPM install axios -s adds code to api.js that encapsulates AXIos

import axios from 'axios'

let base = 'http://baidu/index'

export const getInfo = params => { return axios.post(`${base}/index/info`, params).then(res => res.data) }

Copy the code

3. The installationvuex(VUe-based state management mode)

NPM install vuex-s creates the store.js, actions. Js, getters. Js, mutation. Js files and adds the code to the store.js file

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import * as mutations from './mutations'

Vue.use(Vuex)

const Store = new Vuex.Store({
	state: {
		localeLang: 'CN'
	},
	actions,
	getters,
	mutations,
})

export default Store
Copy the code

Vuex will be explained in detail later

4. InstallVue-router(VUE’s official router)

NPM install vue-router adds code to router.js

import Vue from 'vue' import Router from 'vue-router' import Home from '@/pages/home' Vue.use(Router) export default new Router({routes: [{path: '/', name: 'Home', Component: Home, meta: 'Home'}]})Copy the code

5. Installationsass(CSS Preprocessing Extended Language)

NPM install node-sass –save-dev NPM install sass-loader –save-dev Using sacC, add lang attribute in page style

<style lang="scss" scoped>

</style>
Copy the code

6. Project directory parsing

Code word is not easy, for attention like, more technology welcome to [an umbrella bone] home page 1. Using the session in vue Storage and store user login state vuex 2. Vue | use elementUi on-demand introduction of component method and the question 3. Vue | mobile terminal or PC render different page 4. Vue | The router routing dynamically linked and carry id into details page three models of 5. Vue | routing to jump back to the top