Vue + Element-UI專案搭建
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 '@/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
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
基本的配置就完成了,下面可以開始進行開發啦