1、環境搭建

#1、安裝node （node -v查詢版本號）

node 安裝 ----官網下載安裝

#2、安裝淘寶映象

npm install -g cnpm --registry=https://registry.npm.taobao.org

#3、安裝 webpack，以全域性的方式安裝

npm install webpack -g

#4、全域性安裝vue以及腳手架vue-cli（3.0以後使用的不是vue-cli，之前已經安裝vue-ci的，需要先執行 npm uninstall vue-cli -g 進行解除安裝）

npm install @vue/cli -g --unsafe-perm （使用@vue/cli -V 查詢版本號）

#5、建立vue專案 element-manage-system是你起的專案名稱

vue create element-manage-system （出現選項讓選擇，根據需要選擇建立）

見到這個提示就表示已經建立成功啦

#6、運行當前專案 這個整個專案就搭建好了

npm run serve

服務起來了，這是可以在瀏覽器看一下頁面，完美

2、專案初期搭建

上面已經正常啟動了醒目，下面說明一下公共配置

1、main.js(主檔案)

import Vue from 'vue'
import App from './App.vue'
import router from './router' //引入 vue-router

import store from './store' //引入 vuex
// 全域性配置
import '@/assets/scss/reset.scss' //全域性樣式
import 'element-ui/lib/theme-chalk/index.css' //element-ui樣式
import http from '@/api/config' //axios
import './mock' // mockjs
// 第三方包
import ElementUI from 'element-ui'
Vue.use(ElementUI)
Vue.prototype.$http = http
Vue.config.productionTip = false
　　new Vue({
　　router,
　　store,
　　render: h => h(App)
}).$mount('#app')

2、router(路由跳轉配置)

router作用：簡單理解就是幫助元件之間跳轉用的。

這裡為了效能都採用懶載入，還有這裡不管先登陸登陸頁面 預設跳轉元件為 Main.vue

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 完整路由程式碼
export default new VueRouter({
　　routes: [
　　　　{
　　　　　　path: '/',
　　　　　　component: () => import('@/views/Main'),
　　　　　　children: [
　　　　　　　　{
　　　　　　　　　　path: '/',
　　　　　　　　　　name: 'home',
　　　　　　　　　　component: () => import('@/views/Home/Home'),
　　　　　　　　},
　　　　　　　　{
　　　　　　　　　　path: '/user',
　　　　　　　　　　name: 'user',
　　　　　　　　　　component: () => import('@/views/UserManage/UserManage'),
　　　　　　　　},
　　　　　　　　{
　　　　　　　　　　path: '/mall',
　　　　　　　　　　name: 'mall',
　　　　　　　　　　component: () => import('@/views/MallManage/MallManage'),
　　　　　　　　},
　　　　　　　　{
　　　　　　　　　　path: '/page1',
　　　　　　　　　　name: 'page1',
　　　　　　　　　　component: () => import('@/views/Other/PageOne'),
　　　　　　　　},
　　　　　　　　{
　　　　　　　　　　path: '/page2',
　　　　　　　　　　name: 'page2',
　　　　　　　　　　component: () => import('@/views/Other/PageTwo'),
　　　　　　　　},
　　　　　　]
　　　　}
　　]
})

3、vuex(儲存共享資料)

vuex作用：vuex解決了元件之間同一狀態的共享問題。

export default {
　　//儲存資料
　　state: {
　　　　isCollapse: false
　　},
　　//呼叫方法
　　mutations: {
　　　　collapseMenu(state) {
　　　　　　state.isCollapse = !state.isCollapse
　　　　}
　　},
　　actions: {}
}

4、axios

axios作用：axios主要是用於向後臺發起請求的，還有在請求中做更多是可控功能。

import axios from 'axios'

// 建立一個axios例項
const service = axios.create({
　　// 請求超時時間
　　timeout: 3000
})

export default service

基本的配置就完成了，下面可以開始進行開發啦