vue 字典配置_手把手教你通过vue-cli搭建手机端框架

前言：欢迎前端的小伙伴们前来围观、学习借鉴，如果你是后端、测试和其他的小伙伴也没关系，如果自己也想玩一下前端，想搭建一个前端的框架，那么不妨静下心来看看这篇文章。如果你不是从事开发工作的人员，内容可能相对而言比较枯燥，但是如果想找错别字，也不妨进来看看。

初衷：有的前端的小伙伴要说了，vue-cli不是已经帮我们封装好了webpack(打包)吗？为什么，还要进行二次的搭建和封装呢？我想说的是，是的这些很基础的配置vue-cli都帮我们做好了，但是针对手机端样式初始化，axios的请求封装，常用的工具包类封装，vuex模块化的处理，以及开发、测试、正式环境变量的拆分配置，webpack打包优化配置，手机端响应式的处理，手机端引入第三方UI框架vant的更好的方法等等都没有给我们搭建，因为不同项目可能有不同的方式，我这里介绍的是一种大众的、通用的一些框架：vue-cli+vue-router+vuex+axios+vant。

目的：教你如何手动搭建属于自己的前端手机项目。

废话不多说，直接上干货。

第一步： vue-cli初始化项目(相信很多前端小伙伴这一步操作都不难)

npm install -g @vue/cli

vue create my-project

注：这里的my-project自己可以按照自己的项目名称来定义

如果你没有安装成功，那么需要把nodejs安装一下。

第二步：配置全局环境变量

需要我们在根目录创建四个文件：.env、.env.dev、.env.test、.env.pro

目的：我们不可能反复的去更改配置文件，而是通过运行不同的指令来调用同变量不同环境的值。

//.env 和 .env.dev 内容一样

VUE_APP_NODE_ENV="development"

VUE_APP_API="http://public-api-v1.aspirantzhang.com/"

VUE_APP_VERSION = "d-1.0"

//.env.test

VUE_APP_NODE_ENV="test"

VUE_APP_API="https://wwww.baidu.com/production"

VUE_APP_VERSION = "t-1.0"

//.env.pro

VUE_APP_NODE_ENV="production"

VUE_APP_API="https://wwww.baidu.com/production"

VUE_APP_VERSION = "p-1.0"

这四个配置文件是结合package.json来使用的,启动不同的命令，执行不同变量参数

"scripts": {

"dev": "vue-cli-service serve",

"test": "vue-cli-service serve --mode test",

"pro": "vue-cli-service serve --mode pro",

"build:dev": "vue-cli-service build --mode dev",

"build:test": "vue-cli-service build --mode test",

"build:pro": "vue-cli-service build --mode pro",

"lint": "vue-cli-service lint"

},

第三步：路由配置

在配置路由之前我创建了两个页面：

首页：src/views/Home/Home.vue

列表页：src/views/List/List.vue

1.创建src/router/index.js

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [

{

path: '/',

redirect: {

name: 'home'

}

},

{

path: '/home',

name: 'home',

meta: {

title: '首页',

},

component: () => import(/* webpackChunkName: "Home" */ '../views/Home/Home.vue') // 首页

},

{

path: '/list',

name: 'list',

meta: {

title: '列表页面',

},

component: () => import(/* webpackChunkName: "List" */ '../views/List/List.vue') // 列表页面

}

]

const router = new VueRouter({

base: process.env.BASE_URL,

routes

})

router.beforeEach((to, from, next) => {

/* 路由发生变化修改页面title */

if (to.meta.title) {

document.title = to.meta.title

}

next()

})

export default router

2.在入口文件main.js中引用router

import router from './router'

new Vue({

router,

store,

render: h => h(App),

}).$mount('#app')

3.在App.vue文件中通过router-view来获取路由指向的页面，把页面和路由关联起来

export default {

name: 'App',

created(){

console.log(process.env.VUE_APP_NODE_ENV, '-', process.env.VUE_APP_VERSION)

}

}

第四步：vuex模块处理配置

1.创建src/store/index.js

import Vue from 'vue'

import Vuex from 'vuex'

import VuexPersistence from 'vuex-persist'

import home from './modules/home'

import list from './modules/list'

const vuexLocal = new VuexPersistence({

storage: window.localStorage,

modules: ["home"]

})

Vue.use(Vuex)

const store = new Vuex.Store({

strict: process.env.NODE_ENV !== 'production',

modules: { home, list },

plugins: [vuexLocal.plugin]

})

export default store

2.创建src/store/modules/home.js

export default {

namespaced: true,

state: {

list: [],

visible: false,

firstName: 'Sunny',

lastName: 'Fan'

},

mutations: {

MGetList(state, data){

state.list = data

},

MChangeVisible(state, value){

state.visible = value

}

},

actions: {

// 异步请求接口数据<