返回

Vue 从懵懂到高阶：全面进阶指南

前端

前言

当今互联网时代，前端框架层出不穷，Vue.js 作为其中一颗冉冉升起的新星，以其轻量级、灵活性强、学习曲线平缓等特点，迅速俘获了众多开发者的芳心。Vue 框架不仅适用于构建单页面应用，还广泛应用于移动端开发、桌面端开发等领域。

第一部分：Vue 知识框架

0. 邂逅 Vue

Vue 读音类似于 view

Vue（读音类似于 view）是一款构建用户界面的渐进式 JavaScript 框架。它采用组件化设计，使得开发人员能够轻松地构建可重用和维护的应用程序。

Vue 的渐进式

Vue 框架最大的特点之一就是它的渐进式特性。这意味着您可以根据自己的需要逐步采用 Vue。您可以只使用 Vue 中的部分特性，也可以使用 Vue 的全部特性来构建您的应用程序。

Vue 特点

  • 轻量级： Vue.js 核心库只有几十 KB，非常适合构建小型到中型的应用程序。
  • 灵活性强： Vue.js 采用组件化设计，使开发人员能够轻松地构建可重用和维护的应用程序。
  • 学习曲线平缓： Vue.js 的学习曲线非常平缓，即使是初学者也可以很快上手。

1. 如何安装

方式一：直接 CDN 引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

方式二：下载和引入

npm install vue

<script src="/node_modules/vue/dist/vue.js"></script>

NPM 安装

npm install vue

<script src="/node_modules/vue/dist/vue.js"></script>

2. HelloWorld

<div id="app">
  <h1>{{ message }}</h1>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

第二部分：Vue 进阶技巧

3. 组件

组件是 Vue.js 中最重要的概念之一。组件是一种独立且可复用的代码块，可以用来构建复杂的应用程序。

创建组件

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

import MyComponent from './MyComponent.vue'

new Vue({
  el: '#app',
  components: {
    MyComponent
  }
})

4. 路由

路由是 Vue.js 中另一个重要的概念。路由允许您在不同的页面之间进行导航。

使用 Vue Router

npm install vue-router

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: HelloWorld
  },
  {
    path: '/about',
    component: About
  }
]

const router = new VueRouter({
  routes
})

new Vue({
  el: '#app',
  router
})

5. Vuex

Vuex 是一个用于管理 Vue.js 应用程序状态的库。

使用 Vuex

npm install vuex

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

new Vue({
  el: '#app',
  store
})

第三部分：Vue 项目实战

6. 搭建 Vue 项目

使用 Vue CLI

npm install -g @vue/cli
vue create my-project

手动搭建

  1. 创建一个新的项目文件夹
  2. 在项目文件夹中创建一个 package.json 文件
  3. 在 package.json 文件中添加以下内容：
{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My Vue.js project",
  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^2.6.12"
  }
}
  1. 在项目文件夹中创建一个 src 文件夹
  2. 在 src 文件夹中创建一个 main.js 文件
  3. 在 main.js 文件中添加以下内容：
import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})
  1. 在 src 文件夹中创建一个 App.vue 文件
  2. 在 App.vue 文件中添加以下内容：
<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>
  1. 在项目文件夹中创建一个 public 文件夹
  2. 在 public 文件夹中创建一个 index.html 文件
  3. 在 index.html 文件中添加以下内容：
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
</head>
<body>
  <div id="app"></div>
  <script src="js/main.js"></script>
</body>
</html>

7. 部署 Vue 项目

使用 GitHub Pages

  1. 将您的项目推送到 GitHub
  2. 在 GitHub 上创建一个新的仓库
  3. 在仓库的设置页面中，启用 GitHub Pages
  4. 将 main 分支设置为默认分支
  5. GitHub Pages 将自动为您生成一个网站

使用 Netlify

  1. 在 Netlify 上创建一个账户
  2. 将您的项目连接到 Netlify
  3. Netlify 将自动为您生成一个网站

结语

Vue.js 作为一款优秀的 JavaScript 框架，以其轻量级、灵活性强、学习曲线平缓等特点，迅速俘获了众多开发者的芳心。本文从零基础出发，循序渐进地介绍了 Vue.js 的基础知识和进阶技巧，并提供了 Vue 项目实战指南，希望能帮助您快速掌握 Vue.js 并构建出色的应用程序。