1、项目结构
┌─dist 生产打包输出目录
├─node_modules 模块依赖包
├─public 静态html和网站图标
├─src
│ ┌─assets 静态资源,图标字体、图片、样式表
│ ├─components 公共组件
│ ├─plugins 插件
│ ├─utils 公共js方法
│ ├─views 视图组件
│ ├─login 登录注册
│ ├─orderManage 订单管理
│ ├─App.vue 根组件
│ ├─main.js vue入口文件
│ ├─router.js 路由管理
│ └─store.js vuex状态管理
├─test 测试打包输出目录
├─.env 环境变量配置
├─.env.development 开发(测试)模式环境变量
├─.env.production 生产模式环境变量
└─vue.config.js 配置文件
2、全局配置
vue.config.js
const path=require('path')
function resolve(dir){
return path.join(__dirname,dir)
}
const projectName=require('./package.json').name
module.exports={
// 如果部署项目时不是根目录,请参照官网修改publicPath值
// https://cli.vuejs.org/zh/config/#publicpath
publicPath:'./', //根目录
outputDir:process.env.outputDir, //输出目录
lintOnSave:false, //是否开启 eslint 保存检测,有效值:true||false||'error'
productionSourceMap:false, // 是否为生产环境构建生成 source map
css:{
sourceMap:false, //是否开启 CSS source map
modules:false, //为所有的 CSS 及其预处理文件开启 CSS Modules,不会影响 `*.vue` 文件
loaderOptions:{ //预处理器的 loader 传递自定义选项
sass:{
// 全局引入index.scss文件
data:`@import "~styles/basic.scss";`
}
}
},
devServer: {
open:true, // 编译完成是否自动打开浏览器预览
proxy: { // 配置多个接口代理
'/other': {
target:process.env.VUE_APP_AA,
changeOrigin: true,
ws: true,
pathRewrite: {
'^/aa': ''
}
},
'/mall': {
target:process.env.VUE_APP_BB,
changeOrigin: true,
ws: true,
pathRewrite: {
'^/bb': ''
}
},
'/design': {
target:process.env.VUE_APP_CC,
changeOrigin: true,
ws: true,
pathRewrite: {
'^/cc': ''
}
}
}
},
configureWebpack:{
name:projectName,
resolve:{
alias:{
'@':resolve('src'),
'styles':resolve('src/assets/style'),
'imgs':resolve('src/assets/img')
}
}
}
}
3、环境变量
3.1、备用环境,当其他两个配置出错会使用该配置
.env
VUE_APP_OTHER="https://aa.url.com:8000"
VUE_APP_MALL="https://bb.url.com:8001"
VUE_APP_DESIGN="https://cc.url.com:8002"
outputDir="dist"
3.2、开发(本地)环境
.env.development
VUE_APP_OTHER="http://192.168.0.1:8080/aa"
VUE_APP_MALL="http://192.168.0.1:8080/bb"
VUE_APP_DESIGN="http://192.168.0.1:8080/cc"
outputDir="test"
NODE_ENV="development"
4.3、生产(线上)环境
.env.production
VUE_APP_OTHER="https://aa.url.com:8000"
VUE_APP_MALL="https://bb.url.com:8001"
VUE_APP_DESIGN="https://cc.url.com:8002"
outputDir="dist"
NODE_ENV="production"
5、配置运行命令
package.json 修改此文件中的如下内容
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test": "vue-cli-service build --mode development",
"lint": "vue-cli-service lint"
}
cmd 中打开文件根目录,输入命令运行
npm install
npm run serve // 本地运行
npm run build // 生产打包
npm run test // 测试打包
npm run lint
6、根组件
App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
</style>
7、主入口
main.js
import Vue from 'vue'
import './plugins/axios'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import 'styles/reset.css'
import '@/assets/iconfont/iconfont.css'
Vue.use(ElementUI)
// 全局守卫判断用户是否登录,如果未登录只能进入登录和注册组件,其他组件重定向到登录组件
router.beforeEach((to,from,next)=>{
if(!sessionStorage.getItem('userInfo')){
// 未登录
if(to.path=='/page1' || to.path=='/page2' || to.path=='/page3'){
next();
}else{
next('/login');
}
}else{
// 已登录
if(to.path=='/page1' || to.path=='/page2' || to.path=='/page3'){
next('/');
}else{
next();
}
}
})
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
8、路由
router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'hash',
routes: [
{
path:'/',
name:'home',
component:()=>import('./views/Home'),
redirect:'/orderList',
children:[
{
path:'/orderList', //列表
name:'orderList',
component:()=>import('./views/orderManage/OrderList')
},
{
path:'/orderDetail', //详情
name:'orderDetail',
component:()=>import('./views/orderManage/OrderDetail')
}
]
},{
path: '/login', //登录
name: 'login',
component: ()=>import('./views/login/Login')
},{
path: '/register', //注册
name: 'register',
component: () => import('./views/login/Register') //懒加载
},{
path:'/revisePswd', //忘记密码
name:'revisePswd',
component:()=>import('./views/login/RevisePswd')
},{
path:'*', //错误重定向
redirect:'/'
}
]
})
9、状态管理 vuex
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
dialogVisible:false // 弹框状态
},
mutations: {
set_dialogVisible(state,val){ //设置弹框状态
state.dialogVisible=val;
}
},
actions: {
}
})
vuex 在组件中使用
<script>
import { mapState,mapMutations } from 'vuex'
export default {
computed:{
...mapState([
'dialogVisible'
])
},
methods:{
...mapMutations([
'set_dialogVisible'
]),
dialogOpen(){
// 打开弹框
this.set_dialogVisible(true);
}
}
}
</script>