還沒用幾天VUE绅这，就到3了，本文旨在記錄構(gòu)建一個實用項目模板昂算利。
1册踩、自然是將VUE-CLI升級到最新版本啦（卸載舊的，安裝zhui新的）
npm uninstall -g vue-cli
npm install -g @vue/cli
你要是想看看腳手架的版本效拭，那敲這個
vue --version
2暂吉、構(gòu)建你的項目吧
vue create myproject
進(jìn)入配置的時候問你愿不愿意胖秒，你打YES就好
還有就是，既然想要VUE3的慕的，記得選VUE3就好
到了這兒阎肝，一個原始的項目就有啦。
3肮街、在項目目錄中风题，建一個名叫vue.config.js的文件，并且在這個文件里導(dǎo)出一個對象嫉父。至于這個對象里的選項和配的值沛硅，那就又可以寫一篇了
4、配置路由（和子路由）
1）安裝好路由插件? ? ?cnpm i vue-router@next -D
2）在src目錄下創(chuàng)建?router/index.js?
3）在根目錄的main.js里面引入路由??import router from './router'
4)? ?在Vue對象中加入router的配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
Vue.use(VueRouter)
? const routes = [
? {
? ? path: '/',
? ? redirect: '/login'
? },
? {
? ? path: '/login',
? ? name: 'Login',
? ? component: Login
? },
? {
? ? path: '/',
? ? component: resolve => require(['../views/Index.vue'], resolve),
? ? redirect: '/home',
? ? children: [
? ? ? {
? ? ? ? path: 'home',
? ? ? ? name: 'home',
? ? ? ? component: resolve => require(['../views/home/Home.vue'], resolve),
? ? ? ? meta: { title: '首頁'}
? ? ? },
? ? ? {
? ? ? ? path: '/programCard',
? ? ? ? name: 'programCard',
? ? ? ? component: resolve => require(['../views/programCard/card.vue'], resolve),
? ? ? ? meta: { title: '路由1'}
? ? ? }
? ? ]
? }
]
const router = new VueRouter({
? mode: 'hash',
? base: process.env.BASE_URL,
? routes
})
export default router
5绕辖、安裝VUEX并使用
1)安裝vuex? cnpm i? vuex@next -D
2）在src目錄下創(chuàng)建?store/index.js?
3）在根目錄的main.js里面引入? import store from './store'
4)? ?在main.js里加入store的配置
6摇肌、配置axios
1)? ?安裝vuex? cnpm i? axios@next -D
2)? ?在src目錄建立api/request.js,并在其中引入axios? ? ? ?import axios? from 'axios'
在request.js中創(chuàng)建axios實例
添加請求攔截器和響應(yīng)攔截器
再將實例導(dǎo)出export
3)在src目錄建立api/index.js,引用axios實例，并統(tǒng)一定義請求函數(shù)
7引镊、在src下建立views目錄和路由子目錄home/Home.vue
8朦蕴、在assets目錄增加css 、iconfont弟头、images吩抓、js目錄，存放資源
9赴恨、根目錄下建立static\global.js
定義常量 const API_ROOT='127.0.0.1:8081'
建立對象window.global={
url:{
apiUrl:"http://"+API_ROOT+"/"
}
}
