修改

.editorconfig

@@ -1,5 +1,7 @@
 [*.{js,jsx,ts,tsx,vue}]
+charset = utf-8
 indent_style = space
 indent_size = 2
 trim_trailing_whitespace = true
 insert_final_newline = true
+end_of_line = lf

.env

@@ -0,0 +1,3 @@
+NODE_ENV = 'production'
+VUE_APP_CURRENTMODE = 'stage'
+outputDir = 'stage'

.env.development

@@ -0,0 +1 @@
+VUE_APP_CURRENTMODE = 'development'

.env.production

@@ -0,0 +1,2 @@
+VUE_APP_CURRENTMODE = 'production'
+outputDir = 'docs'

README.md

@@ -1,18 +1,48 @@
 # my-project
 
+## 运行环境 ##
+>  
+>  Node.js(10.15.0) —— JavaScript 运行环境  
+>  npm(6.1.4) —— Nodejs 下的包管理器  
+>  vue-cli(3.3.0) —— Vue脚手架
+>  本项目推荐使用yarn，生成yarn.lock版本锁定文件
+>  1. 全局安装 yarn  
+> `$ npm install yarn -g`
+
+>  2. 全局安装 @vue/cli  
+> `$ npm install @vue/cli -g`或
+> `$ yarn global @vue/cli`
+
+>  3. yarn全局安装 @vue/cli 需要配置环境变量(yarn global bin),修改bin 下面的`*cmd`
+
+>  4.项目中的less为全局的时候，当用到ant-design的ui库的时候，将less将为2.7.3版本
+>  `yarn remove less`,`yarn add less@~2.7`
+
+>  5.babel-plugin-import按需加载ui插件
+ 
+## 依赖库 ##
+>
+> 项目目前用到
+> 1.vue+vuex+vue-route
+> 2.lodash
+> 3.axios
 ## Project setup
 ```
-yarn install
+yarn install或者npm install
 ```
 
 ### Compiles and hot-reloads for development
 ```
-yarn run serve
+yarn run serve或者npm run serve
 ```
 
 ### Compiles and minifies for production
 ```
-yarn run build
+yarn run build或者npm run build
+```
+### Compiles and minifies for development
+```
+yarn run build --mode development或者npm run build --mode development
 ```
 
 ### Run your tests

_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-cayman

babel.config.js

@@ -1,5 +1,9 @@
 module.exports = {
   presets: [
     '@vue/app'
-  ]
-}
+  ],
+  "plugins": [["import", {
+    "libraryName": "iview",
+    "libraryDirectory": "src/components"
+  }]]
+}

package.json

@@ -5,11 +5,15 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "devbuild": "vue-cli-service build --mode development",
     "lint": "vue-cli-service lint",
     "test:e2e": "vue-cli-service test:e2e",
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "axios": "^0.18.0",
+    "iview": "^3.2.2",
+    "lodash": "^4.17.11",
     "register-service-worker": "^1.5.2",
     "vue": "^2.5.21",
     "vue-router": "^3.0.1",
@@ -25,11 +29,13 @@
     "@vue/eslint-config-standard": "^4.0.0",
     "@vue/test-utils": "^1.0.0-beta.20",
     "babel-eslint": "^10.0.1",
+    "babel-plugin-import": "^1.11.0",
     "chai": "^4.1.2",
     "eslint": "^5.8.0",
     "eslint-plugin-vue": "^5.0.0",
-    "less": "^3.0.4",
+    "less": "~2.7",
     "less-loader": "^4.1.0",
+    "mockjs": "^1.0.1-beta3",
     "vue-template-compiler": "^2.5.21"
   }
 }

src/main.js

@@ -1,11 +1,18 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
+import store from '../store'
 import './registerServiceWorker'
+import '../util/iview'
+import axios from '../util/axios'
+
+Vue.prototype.axios = axios
 
 Vue.config.productionTip = false
 
+// 打印当前所处的环境
+console.log(process.env.VUE_APP_CURRENTMODE)
+
 new Vue({
   router,
   store,

src/views/Home.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="home">
     <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+
+    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
+    <Button type="primary">Primary</Button>
+    <Button type="dashed">Dashed</Button>
+    <Button type="text">Text</Button>
   </div>
 </template>
 

store/index.js

@@ -0,0 +1,32 @@
+import Vuex from 'vuex'
+import Vue from 'vue'
+import user from './modules/user'
+
+Vue.use(Vuex)
+
+const state = {
+  userInfo: {
+    name: 'root-暂无'
+  }
+}
+const getters = {
+  userInfo: state => {
+    return state.userInfo
+  }
+}
+const mutations = {
+  setUserInfo (state, data) {
+    state.userInfo = data
+  }
+}
+
+const myStore = new Vuex.Store({
+  modules: {
+    user
+  },
+  state,
+  getters,
+  mutations
+})
+
+export default myStore

store/modules/user.js

@@ -0,0 +1,39 @@
+import user1 from './user1'
+
+const state = {
+  userInfo: {
+    name: 'user-暂无'
+  }
+}
+const getters = {
+  userInfo: state => {
+    return state.userInfo
+  }
+}
+const mutations = {
+  setUserInfo (state, data) {
+    state.userInfo = data
+  }
+}
+const actions = {
+  async getUserInfo (context) {
+    let result = await new Promise((resolve) => {
+      setTimeout(() => {
+        context.commit('setUserInfo', { name: 'Abiel' })
+        resolve({ name: 'Abiel' })
+      }, 1000)
+    })
+    return result
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  getters,
+  actions,
+  modules: {
+    user1
+  }
+}

store/modules/user1.js

@@ -0,0 +1,34 @@
+const state = {
+    userInfo: {
+      name: 'user-暂无'
+    }
+  }
+  const getters = {
+    userInfo: state => {
+      return state.userInfo
+    }
+  }
+  const mutations = {
+    setUserInfo (state, data) {
+      state.userInfo = data
+    }
+  }
+  const actions = {
+    async getUserInfo (context) {
+      let result = await new Promise((resolve) => {
+        setTimeout(() => {
+          context.commit('setUserInfo', { name: 'Abiel' })
+          resolve({ name: 'Abiel' })
+        }, 1000)
+      })
+      return result
+    }
+  }
+
+  export default {
+    namespaced: true,
+    state,
+    mutations,
+    getters,
+    actions
+  }

util/axios.js

@@ -0,0 +1,112 @@
+import axios from 'axios'
+// import Router from '../router'
+
+axios.interceptors.request.use(config => {
+  return config
+}, error => {
+  return Promise.reject(error)
+})
+
+axios.interceptors.response.use(response => {
+  /* 检测某种状态进行重定向
+  if (response.status === 302) {
+    Router.push({
+      name: 'home'
+    })
+  } */
+  return response
+}, error => {
+  return Promise.resolve(error.response)
+})
+
+const checkStatus = response => {
+  // loading
+  // 如果http状态码正常，则直接返回数据
+  if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
+    return response.data
+    // 如果不需要除了data之外的数据，可以直接 return response.data
+  }
+  // 异常状态下，把错误信息返回去
+  return {
+    status: -404,
+    msg: '网络异常'
+  }
+}
+
+function checkCode (res) {
+  // 如果code异常(这里已经包括网络错误，服务器错误，后端抛出的错误)，可以弹出一个错误提示，告诉用户
+  if (res.status === -404) {
+    // console.log(res.msg)
+  }
+  if (res.data && (!res.data.success)) {
+    // console.log(res)
+    // console.log(res.data.msg)
+  }
+  return res
+}
+
+export default {
+  postForm (url, data) {
+    return axios({
+      method: 'post',
+      baseURL: 'https://you.host.com',
+      url,
+      data: data,
+      timeout: 10000,
+      headers: {
+        'X-Requested-With': 'XMLHttpRequest',
+        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+      }
+    }).then(
+      (response) => {
+        return checkStatus(response)
+      }
+    ).then(
+      (res) => {
+        return checkCode(res)
+      }
+    )
+  },
+  postJson (url, params) {
+    return axios({
+      method: 'get',
+      baseURL: '',
+      url,
+      params, // get 请求时带的参数
+      timeout: 10000,
+      headers: {
+        'X-Requested-With': 'XMLHttpRequest',
+        'Content-Type': 'application/json; charset=UTF-8'
+      }
+    }).then(
+      (response) => {
+        return checkStatus(response)
+      }
+    ).then(
+      (res) => {
+        return checkCode(res)
+      }
+    )
+  },
+
+  get (url, params) {
+    return axios({
+      method: 'get',
+      baseURL: '',
+      url,
+      params, // get 请求时带的参数
+      timeout: 10000,
+      headers: {
+        'X-Requested-With': 'XMLHttpRequest'
+      }
+    }).then(
+      (response) => {
+        return checkStatus(response)
+      }
+    ).then(
+      (res) => {
+        return checkCode(res)
+      }
+    )
+  }
+}