webpack搭建简单vue项目 第 6 章 引入各种插件

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」                  ，赢取创作大礼包，挑战创作激励金

前言

上一章我们已经接入了vue，接下来我们要做引入vue路由和vuex还有多页面等工具的准备了

引入Vue路由

安装依赖

npm i vue-router --save

创建 router 文件夹 + index.js 路由文件

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: () => import('@/pages/home'),
      //嵌套路由
      children: [
        {
          path: '/sys',
          component: () => import('@/pages/sys')
        },
        {
          path: '/user',
          component: () => import('@/pages/user')
        }
      ]
    }
  ]
})

main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router'
import '@styles/common.scss';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

app.vue

<template>
  <div id="app">
  //添加上这个
    <router-view></router-view>
  </div>
</template>


<style lang="scss" scoped>
</style>

然后我们设置的父路由 也就是 Home.vue文件

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

引入VueX

安装

npm i vuex --save

在src目录下新建store文件夹, 在store文件夹下新建modules文件夹, 同时新建index.js, 然后在main.js中注入store 模块

const userInfo = {
  namespaced: true,
  state:() => ({
    Token : '123456787asddbqndbqkdjzjkeqwe2h'
  }),
  getter: {
    getToken () { 
      return state.Token
    }
  },
  mutations: {
    TOKEN (state, token) { 
      state.Token = token
    }
  },
  action: {
    //自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
    hideFooter (context, token) { 
      //num为要变化的形参
      context.commit('TOKEN', token);
    }
  }
}
export default userInfo

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import userInfo from './modules/index.js'

Vue.use(Vuex)


export default new Vuex.Store({
  modules: {
    userInfo: userInfo
  }
});

main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router'
import '@styles/common.scss';
import stroe from './store'

new Vue({
  router,
  stroe,
  render: h => h(App)
}).$mount('#app')

使用

computed: {
     ...mapState('userInfo',[
        'Token'
    ]),
  },

引入格式化文件

eslint + prettier + typescript-eslint

安装依赖：

npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue --save-dev

npm i prettier -g

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    '@typescript-eslint/no-var-requires': 0,
    '@typescript-eslint/no-explicit-any': 0,
    '@typescript-eslint/interface-name-prefix': 0,
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
}

{ test: /\.(js|vue|tsx?)$/, exclude: /node_modules/, /** * 预先进行 */ enforce: "pre", loader: "eslint-loader", },

打包发布

安装cross-env

npm i cross-env --save-dev

修改package.json

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}

修改webpack.config.js

判断NODE_ENV为production时，压缩js代码

var path = require('path');
var webpack = require('webpack');

module.exports = {
    // 省略...
}

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map';
    module.exports.plugins = (module.exports.plugins || []).concat([
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"'
        }
      }),
      new webpack.optimize.UglifyJsPlugin(),
    ])
  }

项目地址

gitee.com/liuyinghao1…