*vue官網(wǎng)：https://cn.vuejs.org/
vue-router官網(wǎng)：https://router.vuejs.org/zh-cn/
vuex官網(wǎng)：https://vuex.vuejs.org/zh-cn/
axios中文說明：https://www.kancloud.cn/yunye/axios/234845
vue-cli建立項(xiàng)目
npm install -g vue-cli 全局安裝vue腳手架
vue init webpack-simple project-name 使用webpack-simple模板建立項(xiàng)目
npm run install 安裝依賴庫(kù)
npm run dev 啟動(dòng)開發(fā)服務(wù)器
配置各種loader
#在webpack.config.js文件中添加
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {}
// other vue-loader options go here
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
集成vue-router
#在src下新建router.config.js文件业踏，用于存儲(chǔ)路由配置信息
const updateUser = r => require.ensure([], () => r(require('./components/user/updateUser.vue')), 'updateUser')
export default [
{
path: '/updateUser',
component: updateUser
}
];
*在main.js中引入vue-router
import VueRouter from 'vue-router'
import routes from './router.config'
Vue.use(VueRouter)
const router = new VueRouter({
routes,
mode: 'history',
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
if (from.meta.keepAlive) {
from.meta.savedPosition = document.body.scrollTop;
}
return {x: 0, y: to.meta.savedPosition || 0}
}
}
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
集成vuex
-
src下新建store文件夾
----------------------------------------------------------------------------------------------
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
import getters from './getter'
Vue.use(Vuex)
#index.js中主要配置state-->就是我們所需要的數(shù)據(jù)
const state = {
mytest: 'NB',
}
#導(dǎo)出vuex對(duì)象樹
export default new Vuex.Store({
state,
getters,
actions,
mutations,
})
----------------------------------------------------------------------------------------------
mutation-types.js
#主要用來配置事件（動(dòng)作）類型
export const MY_TEST = 'MY_TEST'
----------------------------------------------------------------------------------------------
mutations.js
#事件具體實(shí)現(xiàn)蔬芥，必須是同步操作
import {
MY_TEST,
} from './mutation-types.js'
export default {
[MY_TEST](state){
state.mytest = "SB"
}
}
----------------------------------------------------------------------------------------------
action.js
#提供事件的異步調(diào)用（如異步發(fā)送郵件）
----------------------------------------------------------------------------------------------
getter.js
#提供state的計(jì)算調(diào)用
有時(shí)候我們需要從store中的state中派生出一些狀態(tài)瓤逼，例如對(duì)列表進(jìn)行過濾并計(jì)數(shù)
----------------------------------------------------------------------------------------------
- 在main.js中引入vuex
import store from './store/'
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
集成axios
#在src目錄下新建http.js文件，導(dǎo)出axios對(duì)象蘑斧，該文件主要提供axios配置，如請(qǐng)求攔截器等等
import axios from 'axios'
// axios 配置
axios.defaults.timeout = 5000;
// http request 攔截器
// axios.interceptors.request.use(
// config => {
// if (store.state.token) {
// config.headers.Authorization = `token ${store.state.token}`;
// }
// return config;
// },
// err => {
// return Promise.reject(err);
// });
// http response 攔截器
// axios.interceptors.response.use(
// response => {
// return response;
// },
// error => {
// if (error.response) {
// switch (error.response.status) {
// case 401:
// // 401 清除token信息并跳轉(zhuǎn)到登錄頁面
// store.commit(types.LOGOUT);
// router.replace({
// path: 'login',
// query: {redirect: router.currentRoute.fullPath}
// })
// }
// }
// // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
// return Promise.reject(error.response.data)
// });
export default axios;
項(xiàng)目整體目錄結(jié)構(gòu)
dist --> 項(xiàng)目編譯后的目錄，也是我們最后要部署到服務(wù)器上的文件
node_modules --> node.js庫(kù)
src/API --> 封裝獲取API數(shù)據(jù)的方法
src/assets --> 資源文件蒲列，如js忽媒，css争拐，圖片等
src/compents --> .vue文件，即組件
src/store --> vuex單例數(shù)據(jù)樹配置文件夾
src/utils --> 封裝常用的工具類
APP.vue --> 主頁面組件
http.js --> 封裝axios
main.js --> 工程入口文件晦雨，可在其中配置導(dǎo)入全局要是用的組件及庫(kù)
router.config.js --> 封裝路由信息配置
index.html --> 訪問主頁架曹，需要部署到服務(wù)器上
package.json --> 依賴庫(kù)配置
webpack.config.js --> webpack工程配置，主要配置loder，用于解析各類文件
