使用
vue-cli2构建一个项目，vue inint webpack cli2_base，然后运行起项目npm run dev即可。之后的一系列配置就在此基础上添加的。
以下配置是我在项目中常用的，大家可自己斟酌是否需要使用！
1、环境变量
主要用于区分 开发、测试、正式环境的
(1) 安装依赖：cnpm i -D cross-env
(2) 在package.json中的scripts新增修改为
// 1.删除了 "build"
// 2.PATH_ENV 是可以自定义名称的，随意修改为你想要的
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"btest": "cross-env PATH_ENV=test node build/build.js",
"bprod": "cross-env PATH_ENV=prod node build/build.js"
}
(3) 在config/prod.env.js里面新增
'use strict'
// ==============以下为新增的==============
let PATH_ENV = '"test"'
if (process.env.PATH_ENV === 'prod') PATH_ENV = '"prod"'
console.log(PATH_ENV)
// ==============以上为新增的==============
module.exports = {
NODE_ENV: '"production"',
// ==============以下为新增的==============
PATH_ENV
// ==============以上为新增的==============
}
(4) 运行npm run btest，会打印
npm run test
则表明是以
测试环境 打包的(5) 运行
npm run bprod，会打印
npm run bprod
则表明是以
正式环境 打包的(6) 本项目是的
npm run dev、npm run btest的环境都默认为 测试环境(7) 使用
环境变量（请先重启npm run dev），可以在main.js里面使用
const isTest = process.env.PATH_ENV === 'test'
console.log(isTest)
当为npm run dev、npm run btest时，isTest 为 true
当为npm run bprod时，isTest 为 false
2、别名配置
在vue中，我们可以使用
@，这里的@我们都知道是指src，同理我们也可以配置属于自己的别名
(1) 在build/webpack.base.conf.js的alias新增：
alias: {
vue$: 'vue/dist/vue.esm.js',
'@': resolve('src'),
// ==============以下为新增的==============
assets: '@/assets',
components: '@/components'
// 等等...
// ==============以上为新增的==============
}
重启npm run dev生效
若你使用的别名是图片路径的话
1、普通引入图片：需要这样使用<img src="~assets/img1.jpg" />，不能省略~
2、动态引入图片：需要这样使用<img :src="require('assets/img2.jpg')" />，不能加上~
3、css背景图：background-image: url('~assets/img1.jpg')，不能省略~
3、使用Sass
(1) 安装依赖：cnpm i -D node-sass sass-loader
(2) 将.vue的<style> 修改为 <style lang="scss">
不重启，就能正常使用sass
4、全局Sass配置
在使用
sass时，难免会书写一些常用的变量、函数、混合等，除了变量可以继承外，其他的只能在当前文件生效，那岂不是我需要在每一个.vue里面的<style lang="scss">手动引入@import '~@/style/mixin.scss';。答案肯定是不用啦，完全可以配置成全局的
(1) 安装依赖：cnpm i -D sass-resources-loader
(2) 在build/utils.js找到scss: generateLoaders('sass')，然后修改
之前的
{
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
修改后
{
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass').concat({ // 这里是修改了的
loader: 'sass-resources-loader',
options: {
resources: [path.resolve(__dirname, '../src/style/app.scss')]
}
}),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
(3) 在src新建style文件夹，然后在style新建app.scss
// 一些变量
$primary: #3398ff;
$success: #29cc7a;
$danger: #ee6869;
// 一些混合
@mixin primary {
color: $primary;
}
@mixin success {
color: $success;
}
@mixin danger {
color: $danger;
}
// 一些循环
@for $i from 12 through 30 {
.f#{$i} {
font-size: 1px * $i !important;
}
}
(4) 重启npm run dev，然后在.vue使用
在<style lang="scss">中使用
.div1 {
color: $primary; // 使用scss变量
}
.div2 {
@include success; // 使用scss混合
}
在template中使用
<div class="f24">使用scss循环生成的类名（.f12 ~ .f30）f代表：font-size</div>
5、全局默认Css配置
在index.html里面的<head>新增<style>即可
如
<style>
* {
margin: 0;
padding: 0;
font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', Arial;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
6、基础组件的自动化全局注册
(1) 在src/components新建global.js
import Vue from 'vue'
// 找到components文件夹下以.vue命名的文件
const RC = require.context('.', true, /\.vue$/)
RC.keys().forEach(fileName => {
const componentConfig = RC(fileName)
// 因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾，只保留真正的文件名
let componentName = fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
let index = componentName.indexOf('/')
if (index !== -1) componentName = componentName.substr(index + 1)
Vue.component(componentName, componentConfig.default || componentConfig)
})
(2) 在main.js里面引入
import './components/global'
(3) 不用重启，直接在.vue里面template写组件即可
<hello-world/>
7、Vuex配置
(1) 安装依赖：cnpm i -S vuex vuex-persistedstate
vuex在刷新后会重新更新状态，但是有时候我们并不希望如此。例如全局相关的，如登录状态、token、以及一些不常更新的状态等，我们更希望能够固化到本地，减少无用的接口访问，以及更佳的用户体验。
vuex-persistedstate：即可解决，可将值放到sessionStorage或localStorage中
(2) 在src新建store文件夹，在store下新建index.js、mutations.js
(3) index.js
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import mutations from './mutations.js'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// token信息
token: 'token1'
},
mutations: mutations,
plugins: [createPersistedState({ storage: window.sessionStorage })]
})
(4) mutations.js
export default {
save(state, [key, data, local = false]) {
if (!key) throw new Error('mutations save need key！')
const keyPath = key.split('.')
const len = keyPath.length
const lastKey = keyPath.pop()
let needSave = state
for (let i = 0; i < len - 1; i++) {
needSave = needSave[keyPath[i]]
}
if (!needSave.hasOwnProperty(lastKey)) {
throw new Error(`【${key}】 Error Key: ${lastKey}`)
}
needSave[lastKey] = data
if (local) {
window.sessionStorage.setItem(key, JSON.stringify(data))
}
}
}
(5) 在main.js引入vuex
import store from './store'
// 在 new Vue 新增 store
new Vue({
el: '#app',
store, // 新增的store
router,
components: { App },
template: '<App/>'
})
(6) 无需重启，直接刷新页面即可成功使用vuex
(7) 在.vue中，执行
this.$store.commit('save', ['token', 'token2'])
即可改变 state.token 的值
8、Vue-Router配置
(1) 安装依赖：cnpm i -S vue-router-auto
vue-router-auto：将项目文件自动转为相应的路由配置
(2) 在src/router/index.js配置
import Vue from 'vue'
import Router from 'vue-router'
import autoRouter from 'vue-router-auto' // 引入依赖
// import HelloWorld from '@/components/HelloWorld'
if (!window.VueRouter) Vue.use(Router)
// 自动生成路由数据
const routes = autoRouter({
redirect: '/home',
rc: require.context('@/views', true, /\.vue$/)
})
// 将生成的路由数据，挂载到 new Router
export default new Router({
routes
})
9、api请求配置
(1) 安装依赖：cnpm i -S axios hzq-axios
hzq-axios：对 axios 请求的二次封装，封装成 Vue 插件 this.$api ，并支持Axios请求、响应拦截
(2) 在src下，新建apiurl文件夹，在apiurl文件夹下新建index.js
export default [
{
name: 'GetImageCaptcha',
url: '/Captcha/GetImageCaptcha'
}
]
(3) 在main.js里引入并使用：
import hzqAxios from 'hzq-axios'
Vue.use(hzqAxios, require.context('@/apiurl', true, /\.js$/), {
baseURL: '/api',
// 请求拦截之前
beforeRequest(config) {
console.log(config)
return config
},
// 接口响应成功事件
respSuccess(res) {
console.log(res)
},
// 接口响应失败事件
respError(e) {
console.log(e)
}
})
(4) 在config/index.js里面设置dev的代理proxyTable
proxyTable: {
'/api': {
target: 'http:/*****.com', // 接口域名
changeOrigin: true // 是否跨域
}
},
(5) 重启npm run dev生效
(6) 在.vue中，这样使用
this.$api.GetImageCaptcha().then(res => {
if (res.code === 1) {
console.log(res.data)
}
})
10、Vue全局方法、变量配置
(1) 安装依赖：cnpm i -S hzq-tool
(2) 在main.js引入并使用
import hzqTool from 'hzq-tool'
Vue.use(hzqTool)
(3) 无需重启，在.vue里面使用
const b = { name: '12' }
const a = this.$tool.copy(b) // 深拷贝方法
this.$setItem('id', '123456') // 往sessionStorage存入数据
网友评论