Vue2纯前端项目开发实战指南从基础到进阶全面掌握前端技术栈

威震华夏关云长

引言

Vue.js是一款用于构建用户界面的渐进式JavaScript框架，由尤雨溪创建和维护。Vue2作为其重要版本，凭借其简洁的API、灵活的组件系统和强大的生态系统，在前端开发领域占据了重要地位。本文将从基础到进阶，全面介绍Vue2纯前端项目开发的核心知识和技术栈，帮助读者系统掌握Vue2开发技能。

Vue2基础知识

Vue2的安装与配置

Vue2可以通过多种方式安装和使用，最常见的是通过CDN引入或使用npm安装。

CDN引入方式：

2. <!-- 开发环境版本，包含了有帮助的命令行警告 -->
3. <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
5. <!-- 生产环境版本，优化了尺寸和速度 -->
6. <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

复制代码

npm安装方式：

2. # 最新稳定版
3. npm install vue@2.6.14

复制代码

Vue CLI脚手架安装：

2. # 全局安装Vue CLI
3. npm install -g @vue/cli
5. # 创建一个新项目
6. vue create my-project
8. # 进入项目目录
9. cd my-project
11. # 运行项目
12. npm run serve

复制代码

Vue实例与生命周期

每个Vue应用都是通过创建一个Vue实例开始的：

2. var vm = new Vue({
3.   // 选项
4. })

复制代码

Vue实例拥有一系列的生命周期钩子函数，这些函数允许我们在实例的不同阶段添加自己的代码：

2. new Vue({
3.   el: '#app',
4.   data: {
5.     message: 'Hello Vue!'
6.   },
7.   beforeCreate: function() {
8.     console.log('beforeCreate: 实例初始化之后，数据观测和事件配置之前调用')
9.   },
10.   created: function() {
11.     console.log('created: 实例创建完成之后调用')
12.   },
13.   beforeMount: function() {
14.     console.log('beforeMount: 实例挂载之前调用')
15.   },
16.   mounted: function() {
17.     console.log('mounted: 实例挂载完成后调用')
18.     console.log(this.$el) // 访问DOM元素
19.   },
20.   beforeUpdate: function() {
21.     console.log('beforeUpdate: 数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前')
22.   },
23.   updated: function() {
24.     console.log('updated: 数据更改导致虚拟DOM重新渲染和打补丁之后调用')
25.   },
26.   beforeDestroy: function() {
27.     console.log('beforeDestroy: 实例销毁之前调用')
28.   },
29.   destroyed: function() {
30.     console.log('destroyed: 实例销毁后调用')
31.   }
32. })

复制代码

模板语法

Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。

文本插值：

2. <span>Message: {{ msg }}</span>

复制代码

一次性插值：

2. <span v-once>这个将不会改变: {{ msg }}</span>

复制代码

原始HTML：

2. <p>Using mustaches: {{ rawHtml }}</p>
3. <p>Using v-html directive: <span v-html="rawHtml"></span></p>

复制代码

特性：

2. <div v-bind:id="dynamicId"></div>

复制代码

使用JavaScript表达式：

2. {{ number + 1 }}
3. {{ ok ? 'YES' : 'NO' }}
4. {{ message.split('').reverse().join('') }}
5. <div v-bind:id="'list-' + id"></div>

复制代码

计算属性与侦听器

计算属性：

2. var vm = new Vue({
3.   el: '#example',
4.   data: {
5.     message: 'Hello'
6.   },
7.   computed: {
8.     // 计算属性的 getter
9.     reversedMessage: function () {
10.       // `this` 指向 vm 实例
11.       return this.message.split('').reverse().join('')
12.     },
13.     // 计算属性的 setter
14.     fullName: {
15.       // getter
16.       get: function () {
17.         return this.firstName + ' ' + this.lastName
18.       },
19.       // setter
20.       set: function (newValue) {
21.         var names = newValue.split(' ')
22.         this.firstName = names[0]
23.         this.lastName = names[names.length - 1]
24.       }
25.     }
26.   }
27. })

复制代码

侦听器：

2. var vm = new Vue({
3.   data: {
4.     question: '',
5.     answer: 'I cannot give you an answer until you ask a question!'
6.   },
7.   watch: {
8.     // 如果 `question` 发生改变，这个函数就会运行
9.     question: function (newQuestion, oldQuestion) {
10.       this.answer = 'Waiting for you to stop typing...'
11.       this.debouncedGetAnswer()
12.     }
13.   },
14.   created: function () {
15.     // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
16.     // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
17.     // AJAX 请求直到用户输入完毕才会发出
18.     this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
19.   },
20.   methods: {
21.     getAnswer: function () {
22.       if (this.question.indexOf('?') === -1) {
23.         this.answer = 'Questions usually contain a question mark. ;-)'
24.         return
25.       }
26.       this.answer = 'Thinking...'
27.       var vm = this
28.       axios.get('https://yesno.wtf/api')
29.         .then(function (response) {
30.           vm.answer = _.capitalize(response.data.answer)
31.         })
32.         .catch(function (error) {
33.           vm.answer = 'Error! Could not reach the API. ' + error
34.         })
35.     }
36.   }
37. })

复制代码

条件渲染与列表渲染

条件渲染：

2. <div v-if="type === 'A'">
3.   A
4. </div>
5. <div v-else-if="type === 'B'">
6.   B
7. </div>
8. <div v-else-if="type === 'C'">
9.   C
10. </div>
11. <div v-else>
12.   Not A/B/C
13. </div>
15. <!-- v-show -->
16. <h1 v-show="ok">Hello!</h1>

复制代码

列表渲染：

2. <ul id="example-1">
3.   <li v-for="item in items" :key="item.message">
4.     {{ item.message }}
5.   </li>
6. </ul>
8. <!-- 带索引的 v-for -->
9. <ul id="example-2">
10.   <li v-for="(item, index) in items">
11.     {{ parentMessage }} - {{ index }} - {{ item.message }}
12.   </li>
13. </ul>
15. <!-- 遍历对象 -->
16. <div v-for="(value, name, index) in object">
17.   {{ index }}. {{ name }}: {{ value }}
18. </div>

复制代码

事件处理

2. <!-- 内联语句中的方法 -->
3. <button v-on:click="say('hi')">Say hi</button>
5. <!-- 缩写语法 -->
6. <button @click="say('hi')">Say hi</button>
8. <!-- 事件修饰符 -->
9. <!-- 阻止单击事件继续传播 -->
10. <a v-on:click.stop="doThis"></a>
12. <!-- 提交事件不再重载页面 -->
13. <form v-on:submit.prevent="onSubmit"></form>
15. <!-- 修饰符可以串联 -->
16. <a v-on:click.stop.prevent="doThat"></a>
18. <!-- 按键修饰符 -->
19. <!-- 只有在 `keyCode` 是 13 时调用 vm.submit() -->
20. <input v-on:keyup.13="submit">
22. <!-- 缩写语法 -->
23. <input @keyup.enter="submit">

复制代码

表单输入绑定

2. <!-- 文本 -->
3. <input v-model="message" placeholder="edit me">
5. <!-- 多行文本 -->
6. <textarea v-model="message" placeholder="add multiple lines"></textarea>
8. <!-- 复选框 -->
9. <input type="checkbox" id="checkbox" v-model="checked">
10. <label for="checkbox">{{ checked }}</label>
12. <!-- 多个复选框，绑定到同一个数组 -->
13. <div id='example-3'>
14.   <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
15.   <label for="jack">Jack</label>
16.   <input type="checkbox" id="john" value="John" v-model="checkedNames">
17.   <label for="john">John</label>
18.   <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
19.   <label for="mike">Mike</label>
20.   <br>
21.   <span>Checked names: {{ checkedNames }}</span>
22. </div>
24. <!-- 单选按钮 -->
25. <div id="example-4">
26.   <input type="radio" id="one" value="One" v-model="picked">
27.   <label for="one">One</label>
28.   <br>
29.   <input type="radio" id="two" value="Two" v-model="picked">
30.   <label for="two">Two</label>
31.   <br>
32.   <span>Picked: {{ picked }}</span>
33. </div>
35. <!-- 选择框 -->
36. <div id="example-5">
37.   <select v-model="selected">
38.     <option disabled value="">请选择</option>
39.     <option>A</option>
40.     <option>B</option>
41.     <option>C</option>
42.   </select>
43.   <span>Selected: {{ selected }}</span>
44. </div>
46. <!-- 多选时绑定到一个数组 -->
47. <div id="example-6">
48.   <select v-model="selected" multiple style="width: 50px;">
49.     <option>A</option>
50.     <option>B</option>
51.     <option>C</option>
52.   </select>
53.   <br>
54.   <span>Selected: {{ selected }}</span>
55. </div>

复制代码

Vue2组件化开发

组件基础

组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。

全局注册：

2. Vue.component('my-component', {
3.   template: '<div>A custom component!</div>'
4. })

复制代码

局部注册：

2. var ComponentA = {
3.   /* ... */
4. }
6. var ComponentB = {
7.   /* ... */
8. }
10. new Vue({
11.   el: '#app',
12.   components: {
13.     'component-a': ComponentA,
14.     'component-b': ComponentB
15.   }
16. })

复制代码

组件的data选项：

2. // 这样是错误的
3. Vue.component('my-component', {
4.   template: '<span>{{ message }}</span>',
5.   data: {
6.     message: 'hello'
7.   }
8. })
10. // 正确做法
11. Vue.component('my-component', {
12.   template: '<span>{{ message }}</span>',
13.   data: function () {
14.     return {
15.       message: 'hello'
16.     }
17.   }
18. })

复制代码

组件通信

Props向下传递数据：

2. Vue.component('child', {
3.   // 声明 props
4.   props: ['message'],
5.   // 就像 data 一样，prop 也可以在模板中使用
6.   // 同样也可以在 vm 实例中通过 this.message 来使用
7.   template: '<span>{{ message }}</span>'
8. })
10. // 使用
11. <child message="hello!"></child>

复制代码

自定义事件向上传递：

2. Vue.component('button-counter', {
3.   template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
4.   data: function () {
5.     return {
6.       counter: 0
7.     }
8.   },
9.   methods: {
10.     incrementCounter: function () {
11.       this.counter += 1
12.       this.$emit('increment')
13.     }
14.   },
15. })
17. // 使用
18. <div id="counter-event-example">
19.   <p>{{ total }}</p>
20.   <button-counter v-on:increment="incrementTotal"></button-counter>
21.   <button-counter v-on:increment="incrementTotal"></button-counter>
22. </div>

复制代码

使用v-model进行双向绑定：

2. Vue.component('my-input', {
3.   props: ['value'],
4.   template: `
5.     <input
6.       :value="value"
7.       @input="$emit('input', $event.target.value)"
8.     >
9.   `
10. })
12. // 使用
13. <my-input v-model="message"></my-input>

复制代码

非父子组件通信：

2. // 简单的状态管理模式
3. var store = {
4.   debug: true,
5.   state: {
6.     message: 'Hello!'
7.   },
8.   setMessageAction (newValue) {
9.     if (this.debug) console.log('setMessageAction triggered with', newValue)
10.     this.state.message = newValue
11.   },
12.   clearMessageAction () {
13.     if (this.debug) console.log('clearMessageAction triggered')
14.     this.state.message = ''
15.   }
16. }
18. // 组件A
19. var vmA = new Vue({
20.   data: {
21.     privateState: {},
22.     sharedState: store.state
23.   }
24. })
26. // 组件B
27. var vmB = new Vue({
28.   data: {
29.     privateState: {},
30.     sharedState: store.state
31.   }
32. })

复制代码

插槽

插槽内容：

2. <!-- 父组件模板 -->
3. <child-component>
4.   <p>这是一些初始内容</p>
5.   <p>这是更多的初始内容</p>
6. </child-component>
8. <!-- 子组件模板 -->
9. <div class="child">
10.   <slot>
11.     只有在没有要分发的内容时才会显示。
12.   </slot>
13. </div>

复制代码

具名插槽：

2. <!-- 父组件模板 -->
3. <base-layout>
4.   <template v-slot:header>
5.     <h1>Here might be a page title</h1>
6.   </template>
8.   <template v-slot:default>
9.     <p>A paragraph for the main content.</p>
10.     <p>And another one.</p>
11.   </template>
13.   <template v-slot:footer>
14.     <p>Here's some contact info</p>
15.   </template>
16. </base-layout>
18. <!-- 子组件模板 -->
19. <div class="container">
20.   <header>
21.     <slot name="header"></slot>
22.   </header>
23.   <main>
24.     <slot></slot>
25.   </main>
26.   <footer>
27.     <slot name="footer"></slot>
28.   </footer>
29. </div>

复制代码

作用域插槽：

2. <!-- 父组件模板 -->
3. <child>
4.   <template v-slot:default="slotProps">
5.     {{ slotProps.user.firstName }}
6.   </template>
7. </child>
9. <!-- 子组件模板 -->
10. <span>
11.   <slot v-bind:user="user">
12.     {{ user.lastName }}
13.   </slot>
14. </span>

复制代码

动态组件与异步组件

动态组件：

2. <!-- 组件会在 `currentTabComponent` 改变时改变 -->
3. <component v-bind:is="currentTabComponent"></component>

复制代码

异步组件：

2. Vue.component('async-webpack-example', function (resolve, reject) {
3.   // 这个特殊的 require 语法将会告诉 webpack
4.   // 自动将你的构建代码切割成多个包，这些包
5.   // 会通过 Ajax 请求加载
6.   require(['./my-async-component'], resolve)
7. })
9. // 或者
10. Vue.component('async-webpack-example', () => import('./my-async-component'))
12. // 高级异步组件
13. const AsyncComp = () => ({
14.   // 需要加载的组件 (应当是一个 Promise 对象)
15.   component: import('./MyComp.vue'),
16.   // 加载中应当渲染的组件
17.   loading: LoadingComp,
18.   // 出错时渲染的组件
19.   error: ErrorComp,
20.   // 渲染加载中组件前的等待时间。默认：200ms。
21.   delay: 200,
22.   // 最长等待时间。超出此时间则渲染错误组件。默认：Infinity
23.   timeout: 3000
24. })

复制代码

Vue Router路由管理

路由基础

安装：

2. npm install vue-router

复制代码

基本使用：

2. // 1. 定义 (路由) 组件。
3. // 可以从其他文件 import 进来
4. const Foo = { template: '<div>foo</div>' }
5. const Bar = { template: '<div>bar</div>' }
7. // 2. 定义路由
8. // 每个路由应该映射一个组件。 其中"component" 可以是
9. // 通过 Vue.extend() 创建的组件构造器，
10. // 或者，只是一个组件配置对象。
11. const routes = [
12.   { path: '/foo', component: Foo },
13.   { path: '/bar', component: Bar }
14. ]
16. // 3. 创建 router 实例，然后传 `routes` 配置
17. const router = new VueRouter({
18.   routes // (缩写) 相当于 routes: routes
19. })
21. // 4. 创建和挂载根实例。
22. // 记得要通过 router 配置参数注入路由，
23. // 从而让整个应用都有路由功能
24. const app = new Vue({
25.   router
26. }).$mount('#app')

复制代码

HTML：

2. <div id="app">
3.   <h1>Hello App!</h1>
4.   <p>
5.     <!-- 使用 router-link 组件来导航. -->
6.     <!-- 通过传入 `to` 属性指定链接. -->
7.     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
8.     <router-link to="/foo">Go to Foo</router-link>
9.     <router-link to="/bar">Go to Bar</router-link>
10.   </p>
11.   <!-- 路由出口 -->
12.   <!-- 路由匹配到的组件将渲染在这里 -->
13.   <router-view></router-view>
14. </div>

复制代码

动态路由匹配

2. const router = new VueRouter({
3.   routes: [
4.     // 动态路径参数 以冒号开头
5.     { path: '/user/:id', component: User }
6.   ]
7. })
9. // 在组件中访问
10. const User = {
11.   template: '<div>User {{ $route.params.id }}</div>'
12. }
14. // 响应路由参数的变化
15. const User = {
16.   template: '...',
17.   watch: {
18.     '$route' (to, from) {
19.       // 对路由变化作出响应...
20.     }
21.   }
22. }
24. // 或者
25. const User = {
26.   template: '...',
27.   beforeRouteUpdate (to, from, next) {
28.     // react to route changes...
29.     // don't forget to call next()
30.   }
31. }

复制代码

嵌套路由

2. const router = new VueRouter({
3.   routes: [
4.     { path: '/user/:id', component: User,
5.       children: [
6.         {
7.           // 当 /user/:id/profile 匹配成功，
8.           // UserProfile 会被渲染在 User 的 <router-view> 中
9.           path: 'profile',
10.           component: UserProfile
11.         },
12.         {
13.           // 当 /user/:id/posts 匹配成功
14.           // UserPosts 会被渲染在 User 的 <router-view> 中
15.           path: 'posts',
16.           component: UserPosts
17.         }
18.       ]
19.     }
20.   ]
21. })

复制代码

编程式导航

2. // 字符串
3. router.push('home')
5. // 对象
6. router.push({ path: 'home' })
8. // 命名的路由
9. router.push({ name: 'user', params: { userId: '123' }})
11. // 带查询参数，变成 /register?plan=private
12. router.push({ path: 'register', query: { plan: 'private' }})
14. // 替换当前位置，不会向 history 添加新记录
15. router.replace(...)
17. // 在浏览器记录中前进一步，等同于 history.forward()
18. router.go(1)
20. // 后退一步记录，等同于 history.back()
21. router.go(-1)
23. // 前进 3 步记录
24. router.go(3)
26. // 如果 history 记录不够用，那就默默地失败呗
27. router.go(-100)
28. router.go(100)

复制代码

路由守卫

全局守卫：

2. const router = new VueRouter({ ... })
4. router.beforeEach((to, from, next) => {
5.   // ...
6. })
8. router.beforeResolve((to, from, next) => {
9.   // ...
10. })
12. router.afterEach((to, from) => {
13.   // ...
14. })

复制代码

路由独享的守卫：

2. const router = new VueRouter({
3.   routes: [
4.     {
5.       path: '/foo',
6.       component: Foo,
7.       beforeEnter: (to, from, next) => {
8.         // ...
9.       }
10.     }
11.   ]
12. })

复制代码

组件内的守卫：

2. const Foo = {
3.   template: `...`,
4.   beforeRouteEnter (to, from, next) {
5.     // 在渲染该组件的对应路由被 confirm 前调用
6.     // 不！能！获取组件实例 `this`
7.     // 因为当守卫执行前，组件实例还没被创建
8.   },
9.   beforeRouteUpdate (to, from, next) {
10.     // 在当前路由改变，但是该组件被复用时调用
11.     // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
12.     // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
13.     // 可以访问组件实例 `this`
14.   },
15.   beforeRouteLeave (to, from, next) {
16.     // 导航离开该组件的对应路由时调用
17.     // 可以访问组件实例 `this`
18.   }
19. }

复制代码

Vuex状态管理

Vuex核心概念

安装：

2. npm install vuex

复制代码

基本使用：

2. import Vue from 'vue'
3. import Vuex from 'vuex'
5. Vue.use(Vuex)
7. const store = new Vuex.Store({
8.   state: {
9.     count: 0
10.   },
11.   mutations: {
12.     increment (state) {
13.       state.count++
14.     }
15.   }
16. })
18. // 在组件中使用
19. this.$store.commit('increment')
20. console.log(this.$store.state.count) // -> 1

复制代码

State、Getter、Mutation、Action

State：

2. // 创建一个 Counter 组件
3. const Counter = {
4.   template: `<div>{{ count }}</div>`,
5.   computed: {
6.     count () {
7.       return this.$store.state.count
8.     }
9.   }
10. }
12. // 或者使用 mapState 辅助函数
13. import { mapState } from 'vuex'
15. export default {
16.   // ...
17.   computed: mapState({
18.     // 箭头函数可使代码更简练
19.     count: state => state.count,
21.     // 传字符串参数 'count' 等同于 `state => state.count`
22.     countAlias: 'count',
24.     // 为了能够使用 `this` 获取局部状态，必须使用常规函数
25.     countPlusLocalState (state) {
26.       return state.count + this.localCount
27.     }
28.   })
29. }

复制代码

Getter：

2. const store = new Vuex.Store({
3.   state: {
4.     todos: [
5.       { id: 1, text: '...', done: true },
6.       { id: 2, text: '...', done: false }
7.     ]
8.   },
9.   getters: {
10.     doneTodos: state => {
11.       return state.todos.filter(todo => todo.done)
12.     }
13.   }
14. })
16. // 访问
17. store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
19. // 使用 mapGetters 辅助函数
20. import { mapGetters } from 'vuex'
22. export default {
23.   // ...
24.   computed: {
25.     // 使用对象展开运算符将 getter 混入 computed 对象中
26.     ...mapGetters([
27.       'doneTodosCount',
28.       'anotherGetter',
29.       // ...
30.     ])
31.   }
32. }

复制代码

Mutation：

2. const store = new Vuex.Store({
3.   state: {
4.     count: 1
5.   },
6.   mutations: {
7.     increment (state) {
8.       // 变更状态
9.       state.count++
10.     }
11.   }
12. })
14. // 提交
15. store.commit('increment')
17. // 提交载荷（Payload）
18. mutations: {
19.   increment (state, n) {
20.     state.count += n
21.   }
22. }
23. store.commit('increment', 10)
25. // 对象风格的提交方式
26. store.commit({
27.   type: 'increment',
28.   amount: 10
29. })
31. // 使用 mapMutations 辅助函数
32. import { mapMutations } from 'vuex'
34. export default {
35.   // ...
36.   methods: {
37.     ...mapMutations([
38.       'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
40.       // `mapMutations` 也支持载荷：
41.       'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
42.     ]),
43.     ...mapMutations({
44.       add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
45.     })
46.   }
47. }

复制代码

Action：

2. const store = new Vuex.Store({
3.   state: {
4.     count: 0
5.   },
6.   mutations: {
7.     increment (state) {
8.       state.count++
9.     }
10.   },
11.   actions: {
12.     increment (context) {
13.       context.commit('increment')
14.     },
15.     incrementAsync ({ commit }) {
16.       setTimeout(() => {
17.         commit('increment')
18.       }, 1000)
19.     }
20.   }
21. })
23. // 分发 Action
24. store.dispatch('increment')
26. // 以载荷形式分发
27. store.dispatch('incrementAsync', {
28.   amount: 10
29. })
31. // 以对象形式分发
32. store.dispatch({
33.   type: 'incrementAsync',
34.   amount: 10
35. })
37. // 使用 mapActions 辅助函数
38. import { mapActions } from 'vuex'
40. export default {
41.   // ...
42.   methods: {
43.     ...mapActions([
44.       'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
46.       // `mapActions` 也支持载荷：
47.       'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
48.     ]),
49.     ...mapActions({
50.       add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
51.     })
52.   }
53. }

复制代码

模块化

2. const moduleA = {
3.   state: () => ({ ... }),
4.   mutations: { ... },
5.   actions: { ... },
6.   getters: { ... }
7. }
9. const moduleB = {
10.   state: () => ({ ... }),
11.   mutations: { ... },
12.   actions: { ... }
13. }
15. const store = new Vuex.Store({
16.   modules: {
17.     a: moduleA,
18.     b: moduleB
19.   }
20. })
22. store.state.a // -> moduleA 的状态
23. store.state.b // -> moduleB 的状态
25. // 在带命名空间的模块内访问全局内容
26. modules: {
27.   foo: {
28.     namespaced: true,
29.     getters: {
30.       // 在这个模块的 getter 中，`getters` 被局部化了
31.       // 你可以使用 getter 的第四个参数来调用 `rootGetters`
32.       someGetter (state, getters, rootState, rootGetters) {
33.         getters.someOtherGetter // -> 'foo/someOtherGetter'
34.         rootGetters.someOtherGetter // -> 'someOtherGetter'
35.       },
36.       someOtherGetter: state => { ... }
37.     },
38.     actions: {
39.       // 在这个模块中， dispatch 和 commit 也被局部化了
40.       // 他们可以接受 `root` 属性以访问根 dispatch 或 commit
41.       someAction ({ dispatch, commit, getters, rootGetters }) {
42.         getters.someGetter // -> 'foo/someGetter'
43.         rootGetters.someGetter // -> 'someGetter'
45.         dispatch('someOtherAction') // -> 'foo/someOtherAction'
46.         dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'
48.         commit('someMutation') // -> 'foo/someMutation'
49.         commit('someMutation', null, { root: true }) // -> 'someMutation'
50.       },
51.       someOtherAction (ctx, payload) { ... }
52.     }
53.   }
54. }

复制代码

Vue2进阶技巧

自定义指令

注册全局指令：

2. // 注册一个全局自定义指令 `v-focus`
3. Vue.directive('focus', {
4.   // 当被绑定的元素插入到 DOM 中时……
5.   inserted: function (el) {
6.     // 聚焦元素
7.     el.focus()
8.   }
9. })

复制代码

注册局部指令：

2. directives: {
3.   focus: {
4.     // 指令的定义
5.     inserted: function (el) {
6.       el.focus()
7.     }
8.   }
9. }

复制代码

钩子函数：

2. Vue.directive('demo', {
3.   bind: function (el, binding, vnode) {
4.     var s = JSON.stringify
5.     el.innerHTML =
6.       'name: '       + s(binding.name) + '<br>' +
7.       'value: '      + s(binding.value) + '<br>' +
8.       'expression: ' + s(binding.expression) + '<br>' +
9.       'argument: '   + s(binding.arg) + '<br>' +
10.       'modifiers: '  + s(binding.modifiers) + '<br>' +
11.       'vnode keys: ' + Object.keys(vnode).join(', ')
12.   }
13. })

复制代码

过滤器

创建过滤器：

2. // 在组件的选项中定义本地过滤器
3. filters: {
4.   capitalize: function (value) {
5.     if (!value) return ''
6.     value = value.toString()
7.     return value.charAt(0).toUpperCase() + value.slice(1)
8.   }
9. }
11. // 创建全局过滤器
12. Vue.filter('capitalize', function (value) {
13.   if (!value) return ''
14.   value = value.toString()
15.   return value.charAt(0).toUpperCase() + value.slice(1)
16. })

复制代码

使用过滤器：

2. <!-- 在双花括号中 -->
3. {{ message | capitalize }}
5. <!-- 在 `v-bind` 中 -->
6. <div v-bind:id="rawId | formatId"></div>
8. <!-- 过滤器可以串联 -->
9. {{ message | filterA | filterB }}
11. <!-- 过滤器是 JavaScript 函数，因此可以接收参数 -->
12. {{ message | filterA('arg1', arg2) }}

复制代码

混入

定义混入：

2. // 定义一个混入对象
3. var myMixin = {
4.   created: function () {
5.     this.hello()
6.   },
7.   methods: {
8.     hello: function () {
9.       console.log('hello from mixin!')
10.     }
11.   }
12. }
14. // 定义一个使用混入对象的组件
15. var Component = Vue.extend({
16.   mixins: [myMixin]
17. })
19. var component = new Component() // -> "hello from mixin!"

复制代码

选项合并：

2. var mixin = {
3.   data: function () {
4.     return {
5.       message: 'hello',
6.       foo: 'abc'
7.     }
8.   }
9. }
11. new Vue({
12.   mixins: [mixin],
13.   data: function () {
14.     return {
15.       message: 'goodbye',
16.       bar: 'def'
17.     }
18.   },
19.   created: function () {
20.     console.log(this.$data)
21.     // => { message: "goodbye", foo: "abc", bar: "def" }
22.   }
23. })

复制代码

插件开发

开发插件：

2. MyPlugin.install = function (Vue, options) {
3.   // 1. 添加全局方法或 property
4.   Vue.myGlobalMethod = function () {
5.     // 逻辑...
6.   }
8.   // 2. 添加全局资源
9.   Vue.directive('my-directive', {
10.     bind (el, binding, vnode, oldVnode) {
11.       // 逻辑...
12.     }
13.     ...
14.   })
16.   // 3. 注入组件选项
17.   Vue.mixin({
18.     created: function () {
19.       // 逻辑...
20.     }
21.     ...
22.   })
24.   // 4. 添加实例方法
25.   Vue.prototype.$myMethod = function (methodOptions) {
26.     // 逻辑...
27.   }
28. }

复制代码

使用插件：

2. // 调用 `MyPlugin.install(Vue)`
3. Vue.use(MyPlugin)
5. // 传入可选的选项对象
6. Vue.use(MyPlugin, { someOption: true })

复制代码

项目实战

项目结构设计

一个典型的Vue2项目结构如下：

2. my-project
3. ├── public                     # 静态资源
4. │   ├── favicon.ico           # 网站图标
5. │   └── index.html            # HTML 模板
6. ├── src                        # 源代码
7. │   ├── assets                # 项目资源
8. │   │   ├── logo.png          # Logo
9. │   │   └── css               # 样式文件
10. │   │       ├── global.css    # 全局样式
11. │   │       └── variables.scss # SCSS 变量
12. │   ├── components            # 公共组件
13. │   │   ├── HelloWorld.vue    # 示例组件
14. │   │   └── CommonHeader.vue  # 公共头部
15. │   ├── layouts               # 布局组件
16. │   │   └── MainLayout.vue    # 主布局
17. │   ├── views                 # 页面组件
18. │   │   ├── Home.vue          # 首页
19. │   │   └── About.vue         # 关于页面
20. │   ├── router                # 路由配置
21. │   │   └── index.js          # 路由主文件
22. │   ├── store                 # Vuex 状态管理
23. │   │   ├── index.js          # Vuex 主文件
24. │   │   └── modules           # 模块
25. │   │       ├── user.js       # 用户模块
26. │   │       └── app.js        # 应用模块
27. │   ├── utils                 # 工具函数
28. │   │   ├── request.js        # 请求封装
29. │   │   └── auth.js           # 权限工具
30. │   ├── App.vue               # 根组件
31. │   └── main.js               # 入口文件
32. ├── .env                      # 环境变量
33. ├── .env.development          # 开发环境变量
34. ├── .env.production           # 生产环境变量
35. ├── .gitignore                # Git 忽略文件
36. ├── babel.config.js           # Babel 配置
37. ├── package.json              # 项目依赖
38. ├── vue.config.js             # Vue CLI 配置
39. └── README.md                 # 项目说明

复制代码

API封装与请求拦截

request.js：

2. import axios from 'axios'
3. import { Message, Loading } from 'element-ui'
4. import store from '@/store'
5. import { getToken } from '@/utils/auth'
7. // 创建axios实例
8. const service = axios.create({
9.   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
10.   timeout: 5000 // 请求超时时间
11. })
13. // 请求拦截器
14. let loadingInstance = null
15. service.interceptors.request.use(
16.   config => {
17.     // 如果是特定接口，显示loading
18.     if (config.showLoading) {
19.       loadingInstance = Loading.service({
20.         lock: true,
21.         text: 'Loading...',
22.         spinner: 'el-icon-loading',
23.         background: 'rgba(0, 0, 0, 0.7)'
24.       })
25.     }
26.    
27.     // 如果有token，添加到请求头
28.     if (store.getters.token) {
29.       config.headers['X-Token'] = getToken()
30.     }
31.     return config
32.   },
33.   error => {
34.     // 关闭loading
35.     if (loadingInstance) {
36.       loadingInstance.close()
37.     }
38.     console.log(error)
39.     return Promise.reject(error)
40.   }
41. )
43. // 响应拦截器
44. service.interceptors.response.use(
45.   response => {
46.     // 关闭loading
47.     if (loadingInstance) {
48.       loadingInstance.close()
49.     }
50.    
51.     const res = response.data
52.    
53.     // 如果自定义code不是200，则判断为错误
54.     if (res.code !== 200) {
55.       Message({
56.         message: res.message || 'Error',
57.         type: 'error',
58.         duration: 5 * 1000
59.       })
60.       
61.       // 50008: 非法的token; 50012: 其他客户端登录; 50014: Token过期;
62.       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
63.         // 重新登录
64.         MessageBox.confirm(
65.           '您已被登出，可以取消继续留在该页面，或者重新登录',
66.           '确定登出',
67.           {
68.             confirmButtonText: '重新登录',
69.             cancelButtonText: '取消',
70.             type: 'warning'
71.           }
72.         ).then(() => {
73.           store.dispatch('user/resetToken').then(() => {
74.             location.reload()
75.           })
76.         })
77.       }
78.       return Promise.reject(new Error(res.message || 'Error'))
79.     } else {
80.       return res
81.     }
82.   },
83.   error => {
84.     // 关闭loading
85.     if (loadingInstance) {
86.       loadingInstance.close()
87.     }
88.    
89.     console.log('err' + error)
90.     Message({
91.       message: error.message,
92.       type: 'error',
93.       duration: 5 * 1000
94.     })
95.     return Promise.reject(error)
96.   }
97. )
99. export default service

复制代码

API模块化：

2. // api/user.js
3. import request from '@/utils/request'
5. export function login(data) {
6.   return request({
7.     url: '/user/login',
8.     method: 'post',
9.     data
10.   })
11. }
13. export function getInfo(token) {
14.   return request({
15.     url: '/user/info',
16.     method: 'get',
17.     params: { token }
18.   })
19. }
21. export function logout() {
22.   return request({
23.     url: '/user/logout',
24.     method: 'post'
25.   })
26. }
28. // 在组件中使用
29. import { login, getInfo, logout } from '@/api/user'
31. export default {
32.   methods: {
33.     handleLogin() {
34.       this.loading = true
35.       login(this.loginForm)
36.         .then(() => {
37.           this.$router.push({ path: this.redirect || '/' })
38.           this.loading = false
39.         })
40.         .catch(() => {
41.           this.loading = false
42.         })
43.     }
44.   }
45. }

复制代码

权限控制

路由权限：

2. // router/index.js
3. import Vue from 'vue'
4. import VueRouter from 'vue-router'
5. import Layout from '@/layouts'
7. Vue.use(VueRouter)
9. // 基础路由
10. export const constantRoutes = [
11.   {
12.     path: '/login',
13.     component: () => import('@/views/login/index'),
14.     hidden: true
15.   },
16.   {
17.     path: '/404',
18.     component: () => import('@/views/404'),
19.     hidden: true
20.   },
21.   {
22.     path: '/',
23.     component: Layout,
24.     redirect: '/dashboard',
25.     children: [
26.       {
27.         path: 'dashboard',
28.         component: () => import('@/views/dashboard/index'),
29.         name: 'Dashboard',
30.         meta: { title: 'Dashboard', icon: 'dashboard' }
31.       }
32.     ]
33.   }
34. ]
36. // 动态路由，需要根据用户角色动态加载
37. export const asyncRoutes = [
38.   {
39.     path: '/permission',
40.     component: Layout,
41.     redirect: '/permission/page',
42.     alwaysShow: true, // will always show the root menu
43.     name: 'Permission',
44.     meta: {
45.       title: 'Permission',
46.       icon: 'lock',
47.       roles: ['admin', 'editor'] // you can set roles in root nav
48.     },
49.     children: [
50.       {
51.         path: 'page',
52.         component: () => import('@/views/permission/page'),
53.         name: 'PagePermission',
54.         meta: {
55.           title: 'Page Permission',
56.           roles: ['admin'] // or you can only set roles in sub nav
57.         }
58.       },
59.       {
60.         path: 'directive',
61.         component: () => import('@/views/permission/directive'),
62.         name: 'DirectivePermission',
63.         meta: {
64.           title: 'Directive Permission'
65.           // if do not set roles, means: this page does not require permission
66.         }
67.       },
68.       {
69.         path: 'role',
70.         component: () => import('@/views/permission/role'),
71.         name: 'RolePermission',
72.         meta: {
73.           title: 'Role Permission',
74.           roles: ['admin']
75.         }
76.       }
77.     ]
78.   },
80.   // 404 page must be placed at the end !!!
81.   { path: '*', redirect: '/404', hidden: true }
82. ]
84. const createRouter = () => new VueRouter({
85.   // mode: 'history', // require service support
86.   scrollBehavior: () => ({ y: 0 }),
87.   routes: constantRoutes
88. })
90. const router = createRouter()
92. // 重置路由
93. export function resetRouter() {
94.   const newRouter = createRouter()
95.   router.matcher = newRouter.matcher // reset router
96. }
98. export default router

复制代码

权限控制逻辑：

2. // permission.js
3. import router from './router'
4. import store from './store'
5. import { Message } from 'element-ui'
6. import NProgress from 'nprogress' // progress bar
7. import 'nprogress/nprogress.css' // progress bar style
8. import { getToken } from '@/utils/auth' // get token from cookie
9. import getPageTitle from '@/utils/get-page-title'
11. NProgress.configure({ showSpinner: false }) // NProgress Configuration
13. const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
15. router.beforeEach(async(to, from, next) => {
16.   // start progress bar
17.   NProgress.start()
19.   // set page title
20.   document.title = getPageTitle(to.meta.title)
22.   // determine whether the user has logged in
23.   const hasToken = getToken()
25.   if (hasToken) {
26.     if (to.path === '/login') {
27.       // if is logged in, redirect to the home page
28.       next({ path: '/' })
29.       NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
30.     } else {
31.       // determine whether the user has obtained his permission roles through getInfo
32.       const hasRoles = store.getters.roles && store.getters.roles.length > 0
33.       if (hasRoles) {
34.         next()
35.       } else {
36.         try {
37.           // get user info
38.           // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
39.           const { roles } = await store.dispatch('user/getInfo')
41.           // generate accessible routes map based on roles
42.           const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
44.           // dynamically add accessible routes
45.           router.addRoutes(accessRoutes)
47.           // hack method to ensure that addRoutes is complete
48.           // set the replace: true so the navigation will not leave a history record
49.           next({ ...to, replace: true })
50.         } catch (error) {
51.           // remove token and go to login page to re-login
52.           await store.dispatch('user/resetToken')
53.           Message.error(error || 'Has Error')
54.           next(`/login?redirect=${to.path}`)
55.           NProgress.done()
56.         }
57.       }
58.     }
59.   } else {
60.     /* has no token*/
62.     if (whiteList.indexOf(to.path) !== -1) {
63.       // in the free login whitelist, go directly
64.       next()
65.     } else {
66.       // other pages that do not have permission to access are redirected to the login page.
67.       next(`/login?redirect=${to.path}`)
68.       NProgress.done()
69.     }
70.   }
71. })
73. router.afterEach(() => {
74.   // finish progress bar
75.   NProgress.done()
76. })

复制代码

按钮级权限控制：

2. // 注册全局指令
3. import Vue from 'vue'
4. import store from '@/store'
6. Vue.directive('permission', {
7.   inserted(el, binding) {
8.     const { value } = binding
9.     const roles = store.getters && store.getters.roles
11.     if (value && value instanceof Array && value.length > 0) {
12.       const permissionRoles = value
13.       const hasPermission = roles.some(role => {
14.         return permissionRoles.includes(role)
15.       })
17.       if (!hasPermission) {
18.         el.parentNode && el.parentNode.removeChild(el)
19.       }
20.     } else {
21.       throw new Error(`need roles! Like v-permission="['admin','editor']"`)
22.     }
23.   }
24. })
26. // 在组件中使用
27. <template>
28.   <div>
29.     <!-- admin 可以看到这个按钮 -->
30.     <el-button v-permission="['admin']">Admin Button</el-button>
31.    
32.     <!-- admin 和 editor 都可以看到这个按钮 -->
33.     <el-button v-permission="['admin','editor']">Editor Button</el-button>
34.   </div>
35. </template>

复制代码

性能优化

路由懒加载：

2. const Foo = () => import('./Foo.vue')
4. // 或者
5. const Foo = resolve => require(['./Foo.vue'], resolve)
7. // 分组代码块，将同一个路由下的所有组件都打包在同个异步块 (chunk) 中
8. const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
9. const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
10. const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

复制代码

组件按需加载：

2. components: {
3.   'my-component': () => import('./myComponent.vue')
4. }

复制代码

使用keep-alive缓存组件：

2. <keep-alive>
3.   <component :is="currentComponent"></component>
4. </keep-alive>
6. <!-- 或者结合路由 -->
7. <keep-alive>
8.   <router-view v-if="$route.meta.keepAlive"></router-view>
9. </keep-alive>
10. <router-view v-if="!$route.meta.keepAlive"></router-view>

复制代码

减少watch的使用：

2. // 不推荐
3. watch: {
4.   someObject: {
5.     handler: function (newVal, oldVal) {
6.       // 当someObject发生变化时，做一些事情
7.     },
8.     deep: true // 深度监听，会监听对象内部属性的变化，性能开销大
9.   }
10. }
12. // 推荐，只监听需要的属性
13. watch: {
14.   'someObject.prop': function (newVal, oldVal) {
15.     // 当someObject.prop发生变化时，做一些事情
16.   }
17. }

复制代码

使用计算属性代替methods：

2. // 不推荐
3. <template>
4.   <div>{{ getName() }}</div>
5. </template>
7. methods: {
8.   getName() {
9.     return this.firstName + ' ' + this.lastName
10.   }
11. }
13. // 推荐
14. <template>
15.   <div>{{ fullName }}</div>
16. </template>
18. computed: {
19.   fullName() {
20.     return this.firstName + ' ' + this.lastName
21.   }
22. }

复制代码

虚拟滚动：

2. <!-- 使用虚拟滚动处理长列表 -->
3. <template>
4.   <div class="virtual-scroll-container" @scroll="handleScroll">
5.     <div class="scroll-content" :style="{ height: totalHeight + 'px' }">
6.       <div
7.         v-for="item in visibleData"
8.         :key="item.id"
9.         class="scroll-item"
10.         :style="{ transform: `translateY(${item.offset}px)` }"
11.       >
12.         {{ item.content }}
13.       </div>
14.     </div>
15.   </div>
16. </template>
18. <script>
19. export default {
20.   data() {
21.     return {
22.       allData: [], // 所有数据
23.       itemHeight: 50, // 每项高度
24.       visibleCount: 20, // 可见项数量
25.       startIndex: 0, // 起始索引
26.       offsetTop: 0 // 滚动条偏移量
27.     }
28.   },
29.   computed: {
30.     totalHeight() {
31.       return this.allData.length * this.itemHeight
32.     },
33.     visibleData() {
34.       return this.allData.slice(
35.         this.startIndex,
36.         this.startIndex + this.visibleCount
37.       ).map((item, index) => {
38.         return {
39.           ...item,
40.           offset: this.startIndex * this.itemHeight + index * this.itemHeight
41.         }
42.       })
43.     }
44.   },
45.   methods: {
46.     handleScroll(e) {
47.       const scrollTop = e.target.scrollTop
48.       this.startIndex = Math.floor(scrollTop / this.itemHeight)
49.       this.offsetTop = scrollTop - (scrollTop % this.itemHeight)
50.     }
51.   },
52.   created() {
53.     // 模拟获取大量数据
54.     this.allData = Array.from({ length: 10000 }, (_, index) => ({
55.       id: index,
56.       content: `Item ${index}`
57.     }))
58.   }
59. }
60. </script>
62. <style>
63. .virtual-scroll-container {
64.   height: 1000px;
65.   overflow-y: auto;
66.   border: 1px solid #ddd;
67. }
69. .scroll-content {
70.   position: relative;
71. }
73. .scroll-item {
74.   position: absolute;
75.   width: 100%;
76.   height: 50px;
77.   line-height: 50px;
78.   box-sizing: border-box;
79.   border-bottom: 1px solid #eee;
80.   padding-left: 10px;
81. }
82. </style>

复制代码

部署与上线

项目打包

2. # 生产环境打包
3. npm run build
5. # 打包结果会生成在 dist 目录下

复制代码

vue.config.js配置：

2. const path = require('path')
3. const CompressionPlugin = require('compression-webpack-plugin')
5. function resolve(dir) {
6.   return path.join(__dirname, dir)
7. }
9. module.exports = {
10.   // 部署应用包时的基本 URL
11.   publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
12.   
13.   // 输出文件目录
14.   outputDir: 'dist',
15.   
16.   // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
17.   assetsDir: 'static',
18.   
19.   // 是否在保存的时候使用 `eslint-loader` 进行检查。
20.   lintOnSave: process.env.NODE_ENV === 'development',
21.   
22.   // 生产环境是否生成 sourceMap 文件
23.   productionSourceMap: false,
24.   
25.   // 配置webpack
26.   configureWebpack: {
27.     resolve: {
28.       alias: {
29.         '@': resolve('src')
30.       }
31.     },
32.     // 生产环境配置
33.     plugins: [
34.       new CompressionPlugin({
35.         algorithm: 'gzip',
36.         test: /\.(js|css|html)$/,
37.         threshold: 10240,
38.         minRatio: 0.8
39.       })
40.     ]
41.   },
42.   
43.   // 链式配置
44.   chainWebpack(config) {
45.     // 设置 svg-sprite-loader
46.     config.module
47.       .rule('svg')
48.       .exclude.add(resolve('src/icons'))
49.       .end()
50.     config.module
51.       .rule('icons')
52.       .test(/\.svg$/)
53.       .include.add(resolve('src/icons'))
54.       .end()
55.       .use('svg-sprite-loader')
56.       .loader('svg-sprite-loader')
57.       .options({
58.         symbolId: 'icon-[name]'
59.       })
60.       .end()
62.     // 设置保留空白
63.     config.module
64.       .rule('vue')
65.       .use('vue-loader')
66.       .loader('vue-loader')
67.       .tap(options => {
68.         options.compilerOptions.preserveWhitespace = true
69.         return options
70.       })
71.       .end()
73.     // 设置 runtimeCompiler
74.     config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js')
76.     // 生产环境配置
77.     if (process.env.NODE_ENV === 'production') {
78.       // 移除 prefetch 插件
79.       config.plugins.delete('prefetch')
80.       
81.       // 压缩代码
82.       config.optimization.minimize(true)
83.       
84.       // 分割代码
85.       config.optimization.splitChunks({
86.         chunks: 'all',
87.         cacheGroups: {
88.           libs: {
89.             name: 'chunk-libs',
90.             test: /[\\/]node_modules[\\/]/,
91.             priority: 10,
92.             chunks: 'initial' // 只打包初始时依赖的第三方
93.           },
94.           elementUI: {
95.             name: 'chunk-elementUI', // 单独将 elementUI 拆包
96.             priority: 20, // 权重要大于 libs 和 app
97.             test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
98.           },
99.           commons: {
100.             name: 'chunk-commons',
101.             test: resolve('src/components'), // 可自定义拓展你的规则
102.             minChunks: 3, // 最小公用次数
103.             priority: 5,
104.             reuseExistingChunk: true
105.           }
106.         }
107.       })
108.       
109.       // https://webpack.js.org/configuration/optimization/#optimizationruntimechunk
110.       config.optimization.runtimeChunk('single')
111.     }
112.   },
113.   
114.   // 开发服务器配置
115.   devServer: {
116.     port: 8080,
117.     open: true,
118.     overlay: {
119.       warnings: false,
120.       errors: true
121.     },
122.     proxy: {
123.       // 代理配置
124.       '/api': {
125.         target: 'http://localhost:3000',
126.         changeOrigin: true,
127.         pathRewrite: {
128.           '^/api': ''
129.         }
130.       }
131.     }
132.   }
133. }

复制代码

部署到静态服务器

Nginx配置：

2. server {
3.     listen 80;
4.     server_name yourdomain.com;
5.     root /usr/share/nginx/html; # 网站根目录
6.     index index.html; # 默认首页
8.     # 处理单页应用路由问题
9.     location / {
10.         try_files $uri $uri/ /index.html;
11.     }
13.     # 静态资源缓存
14.     location ~* \.(?:css|js)$ {
15.         try_files $uri =404;
16.         expires 1y;
17.         add_header Cache-Control "public";
18.     }
20.     # 图片等媒体资源缓存
21.     location ~* \.(jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
22.         try_files $uri =404;
23.         expires 1M;
24.         access_log off;
25.         add_header Cache-Control "public";
26.     }
28.     # 开启gzip压缩
29.     gzip on;
30.     gzip_min_length 1k;
31.     gzip_comp_level 6;
32.     gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
33.     gzip_vary on;
34.     gzip_disable "MSIE [1-6]\.";
36.     # 错误页面
37.     error_page 404 /index.html;
38. }

复制代码

Docker部署：

2. # 构建阶段
3. FROM node:14 as build-stage
5. WORKDIR /app
7. COPY package*.json ./
8. RUN npm install
10. COPY . .
11. RUN npm run build
13. # 生产阶段
14. FROM nginx:stable-alpine as production-stage
16. COPY --from=build-stage /app/dist /usr/share/nginx/html
18. EXPOSE 80
20. CMD ["nginx", "-g", "daemon off;"]

复制代码

Docker Compose：

2. version: '3'
4. services:
5.   app:
6.     build: .
7.     ports:
8.       - "80:80"
9.     volumes:
10.       - ./nginx.conf:/etc/nginx/conf.d/default.conf
11.     restart: always

复制代码

SEO优化

预渲染：

2. // 安装prerender-spa-plugin
3. npm install prerender-spa-plugin --save-dev
5. // vue.config.js配置
6. const PrerenderSPAPlugin = require('prerender-spa-plugin')
7. const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
8. const path = require('path')
10. module.exports = {
11.   configureWebpack: {
12.     plugins: [
13.       new PrerenderSPAPlugin({
14.         // 生成文件的路径，也可以与webpakc打包的一致。
15.         // 下面这句话非常重要！！！
16.         // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
17.         staticDir: path.join(__dirname, 'dist'),
18.         // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
19.         routes: ['/', '/about', '/contact'],
20.         // 这个很重要，如果没有配置这段，也不会进行预编译
21.         renderer: new Renderer({
22.           injectProperty: '__PRERENDER_INJECTED',
23.           inject: {
24.             foo: 'bar'
25.           },
26.           // 在 app.vue 文件中，document.dispatchEvent(new Event('custom-render-trigger'))，
27.           // 这里的事件名要和下面的一致
28.           renderAfterDocumentEvent: 'custom-render-trigger',
29.           // 或者等待指定时间后渲染
30.           renderAfterTime: 5000
31.         })
32.       })
33.     ]
34.   }
35. }

复制代码

Meta标签管理：

2. // 安装vue-meta
3. npm install vue-meta --save
5. // main.js
6. import VueMeta from 'vue-meta'
7. Vue.use(VueMeta, {
8.   // optional pluginOptions
9.   refreshOnceOnNavigation: true
10. })
12. // 在组件中使用
13. export default {
14.   metaInfo() {
15.     return {
16.       title: this.pageTitle,
17.       meta: [
18.         { name: 'description', content: this.pageDescription },
19.         { property: 'og:title', content: this.pageTitle },
20.         { property: 'og:description', content: this.pageDescription },
21.         { property: 'og:type', content: 'website' },
22.         { property: 'og:url', content: this.pageUrl },
23.         { name: 'twitter:card', content: 'summary_large_image' },
24.         { name: 'twitter:title', content: this.pageTitle },
25.         { name: 'twitter:description', content: this.pageDescription },
26.         { name: 'twitter:image', content: this.pageImage }
27.       ]
28.     }
29.   }
30. }

复制代码

结构化数据：

2. <!-- 在组件中添加结构化数据 -->
3. <template>
4.   <div>
5.     <!-- 页面内容 -->
6.    
7.     <!-- 结构化数据 -->
8.     <script type="application/ld+json" v-html="structuredData"></script>
9.   </div>
10. </template>
12. <script>
13. export default {
14.   computed: {
15.     structuredData() {
16.       return JSON.stringify({
17.         "@context": "https://schema.org",
18.         "@type": "Article",
19.         "headline": this.article.title,
20.         "image": [
21.           this.article.imageUrl
22.         ],
23.         "datePublished": this.article.publishDate,
24.         "dateModified": this.article.updateDate,
25.         "author": {
26.           "@type": "Person",
27.           "name": this.article.author
28.         },
29.         "publisher": {
30.           "@type": "Organization",
31.           "name": "Your Organization",
32.           "logo": {
33.             "@type": "ImageObject",
34.             "url": "https://www.your-organization.com/logo.jpg"
35.           }
36.         },
37.         "description": this.article.description
38.       })
39.     }
40.   }
41. }
42. </script>

复制代码

总结与展望

Vue2作为一个成熟的前端框架，提供了完整的解决方案来构建现代化的单页应用。通过本文的学习，我们从Vue2的基础知识开始，逐步深入到组件化开发、路由管理、状态管理等核心概念，再到进阶技巧和项目实战，最后介绍了部署与SEO优化。

Vue2的核心优势在于其简洁的API设计、灵活的组件系统和强大的生态系统，使得开发者能够快速构建高性能、可维护的前端应用。同时，Vue2的渐进式特性也使得它可以轻松地与其他项目或库集成。

随着Vue3的发布，Vue生态系统正在不断演进。Vue3带来了更好的性能、更小的包体积以及更好的TypeScript支持。对于Vue2开发者来说，学习Vue3是一个自然的过程，因为许多核心概念在两个版本中是相通的。

未来，前端开发将继续朝着组件化、模块化和工程化的方向发展。Vue作为一个活跃的开源项目，也将继续演进，为开发者提供更好的工具和体验。无论技术如何变化，掌握核心概念和最佳实践，将帮助开发者更好地适应未来的变化。

希望本文能够帮助读者全面掌握Vue2前端开发技术栈，并在实际项目中应用这些知识，构建出优秀的Web应用。

版权声明

1、转载或引用本网站内容(Vue2纯前端项目开发实战指南从基础到进阶全面掌握前端技术栈)须注明原网址及作者(威震华夏关云长)，并标明本网站网址(https://pixtech.cc/)。

2、对于不当转载或引用本网站内容而引起的民事纷争、行政处理或其他损失，本网站不承担责任。

3、对不遵守本声明或其他违法、恶意使用本网站内容者，本网站保留追究其法律责任的权利。

本文地址: https://pixtech.cc/thread-37598-1-1.html