配置一个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
 | |-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
 | |-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(() => {})