VUE3.0项目配置

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>