前言
前端技术近几年发展十分迅速，经历了jQuery，angularjs，发展到现在的Angular，Vue和React三大前端框架。因Vue相比其他框架更容易上手（无需了解jsx、ts），且性能优异，因而受到广大开发者的青睐。以下详细介绍Vue框架。
vue 全家桶
- vue-cli 自动化构建工具
- vue-router 路由控制
- vuex 状态管理
- vue-Devtool 调试工具
- UI组件库 （elementUI，vant）
- axios http请求
vue-cli 自动化构建工具
搭建交互式的项目脚手架，集成了前端生态中最好的工具
交互式的项目脚手架
基础配置
module.exports = {
// 项目部署的基础路径
publicPath: process.env.PUBLIC_PATH,
// 将构建好的文件输出到哪里
outputDir: process.env.PUBLIC_PATH,
// 该对象将会被 webpack-merge 合并入最终的 webpack 配置。
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
config.devtool = 'source-map'
}
},
// 向 CSS 相关的 loader 传递选项
css: {
loaderOptions: {
scss: {
// 全局引入index.scss
prependData: `@import "~@/assets/styles/index.scss";`
}
}
},
// 链式操作，允许对内部的 webpack 配置进行更细粒度的修改。
chainWebpack: config => {
const svgRule = config.module.rule('svg')
// 清除已有的所有 loader。
// 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
svgRule.uses.clear()
// 添加要替换的 loader
svgRule
.use('vue-svg-loader')
.loader('vue-svg-loader')
},
// 前后的分离时，配置代理服务器
devServer: {
proxy: {
'/': {
target: process.env.PROXY_TARGET,
pathRewrite: {
'/test': ''
}
}
}
}
}
环境变量管理
通过cross-env来管理不同环境的变量
.env # loaded in all cases
.env.local # loaded in all cases, ignored by git
.env.[mode] # only loaded in specified mode
.env.[mode].local # only loaded in specified mode, ignored by git
优先级：.local > .[mode] > .env
.env文件可以简单的以key=value的方式定义变量：
NODE_ENV=production
VUE_APP_TITLE=My App (staging)
注意：变量必须以VUE_APP_*命名才可以在程序中使用。（NODE_ENV，BASE_URL除外）
执行命令：
vue-cli-service build --mode development // 会读取.env .env.development .env.development.local
获取参数：
process.env.NODE_ENV
vue-router 路由控制
路由的基本配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home // 会打包进app.js
},
{
path: '/about',
name: 'about',
// 会打包到about.js，在访问路由about时，才加载about.js
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
mode: 'hash',
base: process.env.BASE_URL,
routes
})
export default router
运行npm run build打包
code splitting
路由的两种模式：
- hash
- history
hash模式不需要后端配置，可直接使用。缺点是无法使用锚点功能。
history模式需要后端配置，url不会出现#，美观。
vuex 状态管理
- 为什么要使用vuex？
以下场景：
- 从根组件向子组件传值，我们一般使用
props，倘若有多层嵌套时，得一级一级向下传递，比较繁琐，并 且中间层级可能并不需要该值。 - 兄弟组件需要使用同一状态时，得通过父组件才能通信。
- 来自不同视图的行为需要变更同一状态。
- 单向数据流
用 Vuex 的思维去实现v-model的双向绑定效果：给 <input> 中绑定 value，然后侦听 input 或者 change 事件，在事件回调中调用 action，通过action改变state，从而再更新视图:
<input :value="message" @input="updateMessage">
// ...
computed: {
...mapState({
message: state => state.obj.message
})
},
methods: {
updateMessage (e) {
this.$store.commit('updateMessage', e.target.value)
}
}
// ...
mutations: {
updateMessage (state, message) {
state.obj.message = message
}
}
双向绑定的计算属性
<input v-model="message">
// ...
computed: {
message: {
get () {
return this.$store.state.obj.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}
-
父子组件通过
props传递数据
子组件数据源通过父组件传递，虽然增加了耦合，但组件之间的层级关系更明显，代码逻辑也更清晰明了。 -
Vue官网对Vuex的解释：
-
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
-
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
vue-Devtool 调试工具
image.png
UI组件库 （elementUI，vant）
axios http请求
相关配置
import Axios from 'axios'
import store from '@/store'
const instance = Axios.create({
baseURL: '',
timeout: 60000
})
instance.interceptors.request.use(
config => {
const csrf = store.getters.csrf
config.headers = {
csrf,
'Content-Type': 'application/json'
}
return config
},
error => {
return Promise.reject(error)
}
)
instance.interceptors.response.use(
response => {
const res = response.data
// code here
return res
},
error => {
return Promise.reject(error)
}
)
export default instance
使用方法
import request from '@/utils/request'
export const getArticles = () => {
return request({
methods: 'get',
url: '',
params: {}
})
}
export const saveArticles = () => {
return request({
methods: 'post',
url: '',
data: {}
})
}
网友评论