*vue官网：https://cn.vuejs.org/
vue-router官网：https://router.vuejs.org/zh-cn/
vuex官网：https://vuex.vuejs.org/zh-cn/
axios中文说明：https://www.kancloud.cn/yunye/axios/234845
vue-cli建立项目
npm install -g vue-cli 全局安装vue脚手架
vue init webpack-simple project-name 使用webpack-simple模板建立项目
npm run install 安装依赖库
npm run dev 启动开发服务器
配置各种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文件，用于存储路由配置信息
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-->就是我们所需要的数据
const state = {
mytest: 'NB',
}
#导出vuex对象树
export default new Vuex.Store({
state,
getters,
actions,
mutations,
})
----------------------------------------------------------------------------------------------
mutation-types.js
#主要用来配置事件（动作）类型
export const MY_TEST = 'MY_TEST'
----------------------------------------------------------------------------------------------
mutations.js
#事件具体实现，必须是同步操作
import {
MY_TEST,
} from './mutation-types.js'
export default {
[MY_TEST](state){
state.mytest = "SB"
}
}
----------------------------------------------------------------------------------------------
action.js
#提供事件的异步调用（如异步发送邮件）
----------------------------------------------------------------------------------------------
getter.js
#提供state的计算调用
有时候我们需要从store中的state中派生出一些状态，例如对列表进行过滤并计数
----------------------------------------------------------------------------------------------
- 在main.js中引入vuex
import store from './store/'
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
集成axios
#在src目录下新建http.js文件，导出axios对象，该文件主要提供axios配置，如请求拦截器等等
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信息并跳转到登录页面
// 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;
项目整体目录结构
dist --> 项目编译后的目录，也是我们最后要部署到服务器上的文件
node_modules --> node.js库
src/API --> 封装获取API数据的方法
src/assets --> 资源文件，如js，css，图片等
src/compents --> .vue文件，即组件
src/store --> vuex单例数据树配置文件夹
src/utils --> 封装常用的工具类
APP.vue --> 主页面组件
http.js --> 封装axios
main.js --> 工程入口文件，可在其中配置导入全局要是用的组件及库
router.config.js --> 封装路由信息配置
index.html --> 访问主页，需要部署到服务器上
package.json --> 依赖库配置
webpack.config.js --> webpack工程配置，主要配置loder，用于解析各类文件
