配置一个vue3.0项目的完整步骤

 yarn add global @vue/cli

 D:\test>vue create book

 . |-book |-babel.config.js |-package.json |-public | |-favicon.ico | |-index.html |-README.md |-src | |-App.vue | |-assets | | |-logo.png-600 | |-components | | |-HelloWorld.vue | |-main.js |-yarn.lock

 D:\test>cd book

 yarn serve

 |-book |-babel.config.js |-package.json |-public | |-favicon.ico | |-index.html |-README.md |-src | |-api | |-App.vue | |-assets | | |-logo.png-600 | |-components | | |-HelloWorld.vue | |-main.js | |-router | |-store | | |-index.js | |-utils | |-views |-yarn.lock

 D:\test\book>yarn add vue-router

 import Vue from 'vue' import Router from 'vue-router' import Login from '../views/Login.vue' import Index from '../views/Index.vue' Vue.use(Router) const router = new Router({ routes: [{ path: '/', redirect: '/index' }, { path: '/login', name: 'Login', components: Login }, { path: 'index', name: 'Index', components: Index }] }) export default router

 import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app')

 D:\test\book>yarn add element-ui

 import Vue from 'vue' import App from './App.vue' import router from './router' // 引入element-ui import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI) Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app')

 D:\test\book>yarn add node-sass sass-loader

 yarn add normalize.css

 import 'normalize.css'

 D:\test\book>yarn add axios

 import axios from "axios" import { Message } from "element-ui" // 这个baseUrl要根据实际情况进行改变 axios.defaults.baseURL = "/" axios.defaults.headers.common["Content-Type"] = "application/json; charset=UTF-8" axios.defaults.headers.common["Access-Control-Allow-Origin"] = "*" // 请求拦截器 添加token axios.interceptors.request.use( config => { return config }, error => { return Promise.reject(error) } ) // 响应拦截器即异常处理 axios.interceptors.response.use( response => { return response }, error => { Message({ message: error.message, type: "error", duration: 5000, }) return Promise.resolve(error) } ) export default { // get请求 get(url, param) { return new Promise((resolve, reject) => { axios({ method: "get", url, params: param, }) .then(res => { resolve(res) }) .catch(error => { Message({ message: error, type: "error", duration: 5000, }) reject(error) }) }) }, // post请求 post(url, param) { return new Promise((resolve, reject) => { axios({ method: "post", url, data: param, }) .then(res => { resolve(res) }) .catch(error => { Message({ message: error, type: "error", duration: 5000, }) reject(error) }) }) }, // all get allGet(fnArr) { return axios.all(fnArr) }, }

 import service from './config' class Login { login(params) { return service.post('login', params) } } export default new Login()

 "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": { "no-console": "off" }, "parserOptions": { "parser": "babel-eslint" } },

 D:\test\book>yarn add mockjs

 import Mock from 'mockjs' Mock.mock('/login', 'post', (options) => { // console.log('options:', options) let data = JSON.parse(options.body) let name = data.name let password = data.password if (name === 'admin' && password === 'admin') { return { status: 1, message: '登录成功' } } else { return { status: 0, message: '账号或者密码错误' } } })

 // 引入mock import './mock.js'

 yarn add vee-validate

 // 引入表单验证 import VeeValidate, { Validator } from 'vee-validate' Vue.use(VeeValidate, { fieldsBagName: 'vee-fields' }) // 汉化表单验证 import zhCN from 'vee-validate/dist/locale/zh_CN' Validator.localize('zh_CN', zhCN)

 /deep/ .is-danger input { border-color: #ff3860; }

 import FormErrorMessage from '../components/common/FormErrorMessage.vue'

 name: 'Login', components: { FormErrorMessage }, data() { return { form: { name: '', password: '' } } },

   {{ errors.first('name') }}

 onSubmit() { this.$validator.validate().then(result => { if (result) { login.submit(this.form).then(res => { // console.log('res:', res); if (res.data.status === 1) { // 如果登录成功则跳转我index页面 this.$router.push('/index') } else { // 使用element-ui的message组件，显示登录报错信息 this.$message({ message: res.data.message, type: 'error', duration: 5000 }) } }).catch(error => { this.$message({ message: error, type: 'error', duration: 5000 }) }) } }) },

 yarn add js-cookie

 D:\test\book>yarn add vuex

 import Vue from 'vue' import Vuex from 'vuex' // 引入js-cookie import Cookies from 'js-cookie' Vue.use(Vuex) const store = new Vuex.Store({ state: { name: '' }, mutations: { loginIn(state, name) { state.name = name // 设置过期时间为1天 Cookies.set('name', name, { expires: 1 }) }, loginOut(state) { state.name = '' Cookies.remove('name') } } }) export default store

 import store from './store/index.js' …… new Vue({ router, store, render: h => h(App), }).$mount('#app')

 if (res.data.status === 1) { // 将用户信息存储在vuex中 this.$store.commit('loginIn', this.form.name) // 如果登录成功则跳转我index页面 this.$router.push('/index') } else { …… }

 // 设置路由拦截 router.beforeEach((to, from, next) => { let name = Cookies.get('name') || store.state.name // 如果cookie没有过期或者store中有name值,则允许访问直接通过。否则就让用户登录 if (name) { store.commit('loginIn', name) next() } else { if (to.path == '/login') { next() } else { next({ name: 'Login' }) store.commit('loginOut') } } }) router.afterEach(() => {})