vue搭建

工具

提前安装好 nodejs ,安装过程省略

全局配置npm镜像源

1
2
3
4
# 淘宝旧镜像
npm config set registry https://registry.npm.taobao.org
#淘宝新镜像
npm config set registry https://registry.npmmirror.com

环境搭建

  1. 安装vuecli
1
npm install -g @vue/cli@4.5.13
  1. 初始化工程
1
2
vue create demo-name
#界面 ->选择vue2

配置文件

vue.config.js配置

vue支持webpack的配置

配置示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// vue 配置文件，可以配置 webpack的相关配置


//拿到 path ,需要先安装 npm install path@0 --save
const path = require('path')
//获取到 webpack
const webpack = require('webpack')

// 定义 resolve 函数供后续使用
function resolve(dir) {
    return path.join(__dirname, dir)
}


//webpack配置
module.exports = {
    //关闭语法检查
    lintOnSave: false,
    //代理配置
    devServer: {
        port: 80,
        host: "localhost",
        proxy: {
            '/api': {
                target: 'http://localhost:8608',  //代理地址
                //ws: true,  //proxy websockets
                changeOrigin: true,  // 跨域配置，如果接口跨域，需要进行这个参数配置
                pathRewrite: {
                    '^/api': '/'
                    //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
                    //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
                }
            },
            '/foo': {
                target: '<other_url>'
            }
        }
    },

    //webpack配置
    configureWebpack: {
        resolve: {
            extensions: ['.js', '.vue', '.json'],
            //重命名
            alias: {
                '@': resolve('src'),
                /*'~': process.cwd(),
                public: resolve('public'),
                components: resolve('src/components'),
                util: resolve('src/utils'),
                store: resolve('src/store'),
                router: resolve('src/router')*/
            }
        }
    }
}

版本说明

https://juejin.cn/post/7096798713628065800

package.json配置

存放用到的依赖包及通过npm install 安装的

babel.config.js 配置

ES6语法的配置文件

程序入口说明

入口文件在main.js中，这是vuecli搭建的启动入口，最先调用此处，因此插件和vue的实例化都在此进行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Vue from 'vue'

// 此处可可以加载其他插件，
// 通过 import ...引入
// 通过 Vue.use(...) 加载

//关闭生产提醒
Vue.config.productionTip = false

//创建实例，将app组件实例化
new Vue({
  el: '#app',
  render: h => h(App)
})

插件安装

安装插件方式

​ 1.安装

命令行执行安装程序

1
2
3
4
5
6
7
8
9
10
11
12
# 安装vuex 和 vue-route ，--save表示保存在package.json中
# npm view axios versions --json 可以查看插件版本
npm install vuex@3 --save
npm install vue-router@3 --save
# 安装   -S=--save -D=--save-dev
npm install sass -S -D 
# 安装 vue-loader
npm install -D vue-loader vue-template-compiler
# 安装  cache-loader
npm install --save-dev cache-loader

npm install element-ui@2.15 --save

​ 2. 引入

在main.js中引入需要的插件

1
2
3
4
5
6
7
8
9
10
11

import Vue from 'vue'
import Element from 'element-ui'
import Cookies from 'js-cookie'
import VueRouter from 'vue-router'

Vue.use(Element, {
  size: Cookies.get('size') || 'medium', // set element-ui default size
  locale: enLang // 如果使用中文，无需设置，请删除
})

安装vue-router 和 vuex

vue-router 和vuex为vue插件，比较特殊

当引入vue-router 和vuex后可新增配置项 router 和 store，之后在new出来的实例中加入

Vue.use()组件不能在main.js中执行，因为main.js引入的 router 和store中会用到VueRouter和Vuex，根据js语法，在此use的话源js就无法使用了，

main.js 中

1
2
3
4
5
6
7
8
9
10
11

// 此处为自己写的router文件夹下的index.js文件，一般定义在@/router下
import router from "./router";
import store from "./store";

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

引入router路由

index.js

在src下 建立router文件夹，创建index.js文件，此文件即为路由配置文件

src/router/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//引入路由
import VueRouter from "vue-router";
//引入需要注册路由的组件，如layout
import Layout from '@/layout/index'


//创建并暴露，在main.js中加入vue实例，加入后可以使用$router
export default new VueRouter({
    routes:[
        {
            path: '/',
            component:  Layout
        },
        {
            path:'/login',
            component: ()=>import('@/views/login/index')
        }
    ]
})

引入Vuex

在src下 建立store文件夹，创建index.js文件，此文件即为vuex配置文件

index.js

/src/store/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import Vue from 'vue'
import Vuex from 'vuex'
//引入模块
import m1 from './modules/mdoule1.js'
import m2 from './modules/mdoule2.js'
import getters from './getters.js'

//vuex需要在这里use
Vue.use(Vuex)

//模块使用
export default new Vuex.Store({
    modeles:{
        m1,
        m2
    },
    getters:getters
})

getters.js

getters主要用于在程序使用时，可以直接指定 .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const getters = {
  sidebar: state => state.app.sidebar,
  size: state => state.app.size,
  device: state => state.app.device,
  visitedViews: state => state.tagsView.visitedViews,
  cachedViews: state => state.tagsView.cachedViews,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  introduction: state => state.user.introduction,
  roles: state => state.user.roles,
  permission_routes: state => state.permission.routes,
  errorLogs: state => state.errorLog.logs
}
export default getters

1
2
3
4
5
6
7
8
9
10
11
<script>
    # 引入 mapGetters
import { mapGetters } from 'vuex'
# vue中
export default {
    data() {},
    computed: {
        ...mapGetters['sidebar','device']
    }
}
</script>

安装 vuex-persistedstate

vuex本身是将数据保存在内存中的，当刷新页面之后内存会重新加载，未重新初始化的数据丢失，

vuex-persistedstate插件将数据持久化在localstorage中，刷新防止丢失

1
npm install vuex-persistedstate@3.2.1

在@/sotore/index.js中配置vuex的插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import Vue from 'vue'
import Vuex from 'vuex'

//引入插件
import createPersistedState from "vuex-persistedstate"

//vuex需要在这里use
Vue.use(Vuex)

//模块使用
export default new Vuex.Store({
    modeles:{},
    getters:getters,
    //应用插件
  	plugins:[createPersistedState({
		//默认为localStorage，可以改成sessionStorage或Cookie 
        storage: window.sessionStorage
    })]
})