XXQQ

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

小巷千秋

创建项目

npm create XXQQ

选择 Vue 2.0

配置

关闭语法检查

在vue.config.js文件的配置项中，增加：

lintOnSave: false,

设置运行项目，自动打开浏览器

在package.json文件的，scripts字段里的 serve 属性中增加--open

"scripts": {
    "serve": "vue-cli-service serve --open",
    ...
}

按需引入 ElementUI

安装 ElementUI

npm i element-ui -S

安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，在 /XXQQ 目录下的添加 babel.config.js 文件：

{
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

重置默认浏览器样式

NPM 安装

npm install --save normalize.css

在 main.js 中引入

import 'normalize.css/normalize.css'

安装 less 、less-loader

npm i less less-loader@6

安装路由组件

NPM 安装

npm i vue-router@3

Vue 2 使用 vue-router@3

在 src 下创建 router 文件夹，编写 router 配置项：

src/router/user.js

import Vue from 'vue'
// 引入 VueRouter
import VueRouter  from "vue-router";
// 引入路由组件
import HomePage from "@/pages/home/HomePage";

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [

    {
      path: '/',
      redirect: '/home',
    },
    {
      path: '/home',
      component: HomePage,
      name: 'home',
      meta: {show: true},
    }
  ]
})

export default router

注：普通组件放在 components 文件夹中，路由组件放在 pages 文件夹中

在 main.js 中引入路由并配置到 Vue 实例上

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

AXIOS

npm i axios

对 Axios 进行二次封装

request.js

/**
 * 对 axios 进行二次封装
 */
import axios from 'axios'
// 引入进度条
import nprogress from 'nprogress'
// 引入进度条样式
import 'nprogress/nprogress.css'
import store from '@/store'
// 创建一个 axios 实例
const requests = axios.create({
  // 配置对象

  // 基础路径
  // baseURL: "http://localhost:5000/api"
  baseURL: "/api",
  // 超时时间：5 s
  timeout: 5000,
})

// 请求拦截器
requests.interceptors.request.use(config => {
  // config：本次请求的配置对象
  // 有一个重要属性：headers
  // 临时身份标识：userTempId
  let uuidToken = store.state.detail.uuid_token
  if (uuidToken) {
    config.headers.userTempId = uuidToken
  }
  // 登录 token
  let token = store.state.user.token
  if (token) {
    config.headers.token = token
  }
  // 进度条开始
  nprogress.start()

  return config
})

// 响应拦截器
requests.interceptors.response.use(
  // 请求成功
  res => {
    // 进度条结束
    nprogress.done()

    return res.data

  },
  // 请求失败
  err => {
    return Promise.reject(new Error('请求出错：' + err.message))
  }
)


// 对外暴露
export default requests

vuex

安装 vuex

npm i vuex@3

创建文件：src/store/index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})

在main.js中创建vm时传入store配置项

......
//引入store
import store from './store'
......

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store
})