安装
image.png
全局安装
npm install -g @vue/cli
查看版本
npm -V
如果之前安装了3.0以下的，需要先卸载
npm uninstall -g vue-cli
安装过程
-
m1
dos命令.png - m2
vue ui
UI界面.png
vue.config.js的配置
vue.config.js相关配置
路由
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const Index = () => import('./views/index.vue');
const EarlyWarningMan = () => import('./views/earlyWarningMan/earlyWarningMan.vue');
const ProductPublicOpinion = () => import('./views/publicOpinionMonitoring/product_public_opinion.vue');
const Login = () => import('./views/login.vue');
export default new Router({
mode: 'history',
// base: '/weima/',
routes: [
{
path: '/',
redirect: '/index',
},
{
path: '/index',
name: 'index',
component: Index,
},
{
path: '/product',
name: 'ProductPublicOpinion',
component: ProductPublicOpinion,
},
{
path: '/earlyWarningMan',
name: 'earlyWarningMan',
component: EarlyWarningMan,
}
]
});
装饰器
https://github.com/kaorun343/vue-property-decorator
vue class component 是vue 官方出的
vue property decorator 是社区出的
其中vue class component 提供了 vue component 等等
vue property decorator 深度依赖了 vue class component 拓展出了很多操作符 @Prop @Emit @Inject 等等 可以说是 vue class component 的一个超集
正常开发的时候 你只需要使用 vue property decorator 中提供的操作符即可 不用再从vue class componen 引入vue component
axios以及登录拦截
基于promise用于浏览器和node.js的http客户端
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.withCredentials = true;
// 全局设置post请求
axios.interceptors.request.use((config) => {
let method: any = config.method;
let data = config.data;
if (method.toLocaleLowerCase() === 'post') {
config.data = data;
}
return config
}, (error) => Promise.reject(error));
// 全局拦截token失效
axios.interceptors.response.use((res) => {
let data: any = res.data;
const { NODE_ENV } = process.env;
// 如果token失效
if (data.result.status === 400 && NODE_ENV === 'production') {
location.href = '/login';
} else if (data.result.status === 'OK' && data.result.code === '2000') {
Promise.resolve(data.data);
} else {
// this.$message.error(data.result.message);
}
return data;
}, error => {
Promise.reject(error);
// vm.$message.error('网络错误，请稍后重试');
})
vuex
相比vue-cli3.0以下的不同
安装命令的不同
npm install vue-cli -g
vue init webpack my-app
npm install
cd my-app
npm run dev
