Vue快速入门

发表于 更新于 分类于 阅读次数： 本文字数： 7.4k 阅读时长 ≈ 7 分钟

快速运行

1
2
3
4
5
6
cd <your-project-name>
cd vue/vue
npm install
npm run build
// 或者
npm run serve

其中，build和serve是定义在package.json里的脚本命令，前者用于正式部署到服务器供用户使用，后者用于本地开发调试实时预览，支持热更新。

Vue项目结构

在一个vue项目中，基本目录结构可能如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
my-vue-app/
│
├── public/
│   └── index.html         # 应用的主HTML文件
│
├── src/
│   ├── assets/            # 静态资源文件（图片、样式等）
│   ├── components/        # Vue组件（页面一部分）
│   ├── views/             # 路由视图组件（完整页面）
│   ├── App.vue            # 根组件
│   ├── main.js            # 应用的入口文件
│   ├── router.js          # 路由配置（如果有的话）
│   └── store.js           # Vuex状态管理（如果有的话）
│
├── package.json           # 项目依赖和脚本
└── README.md              # 项目的说明文件

其中，作为项目入口文件的有三个核心文件： index.html main.js App.vue
下面以此次项目为例说明：

index.html——主页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

在Vue项目中，index.html 通常是用来加载你的应用并提供一个 div 容器来挂载Vue实例。

  • <head> 标签:
    包含页面的元数据，包括字符集、兼容性设置、视口设置、图标链接和页面标题。
  • <body> 标签:
    包含页面的内容。这个区域会显示在浏览器窗口中。
    • <div id="app"></div>:
      这是Vue应用的挂载点。Vue实例会在这里将你的组件渲染到页面上。id="app" 指定了这个 div 的 id 为 app，在 main.js 中，Vue 实例会挂载到这个元素上。
    • 其余略
      总之，index.html创建了一个id为"app"的容器，Vue.js应用将会挂载在这个元素上，通过在main.js中使用app.mount('#app')，Vue实例接管了这个div元素的管理，并将应用的内容渲染到这个元素中。

main.js——入口文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Vue from 'vue' // 引入Vue框架
import App from './App.vue' // 引入根组件App.vue
import router from './router' // 引入路由配置
import ElementUI from 'element-ui'; // 引入ElementUI组件库
import 'element-ui/lib/theme-chalk/index.css'; // 引入ElementUI的CSS样式
import './assets/global.css'; // 引入全局CSS样式
import request from '@/utils/request'; // 引入自定义的请求工具

Vue.config.productionTip = false // 关闭生产模式下的提示信息

Vue.use(ElementUI); // 使用ElementUI插件

Vue.prototype.request = request // 将request工具挂载到Vue的原型上

new Vue({
    router, // 注入路由配置
    render: h => h(App), // 渲染根组件App.vue
    data: function () {
        return {
            globalVar: {}, // 定义一个全局变量
        }},
}).$mount('#app') // 挂载Vue实例到id为app的元素上

这是Vue应用的入口JavaScript文件。它通常是用来创建Vue实例并挂载到 index.html 中的 div 容器上，然后接管这个元素及其内容的控制。
核心：new Vue({...}).$mount(#app)，将Vue根组件挂载到<div id="app">的元素（容器）上。

App.vue——根组件

1
2
3
4
5
6
7
8
9
<template>
    <div id = "app">
        <router-view/>
    </div>
</template>
<style>
#app{
}
</style>

干了一件事：设置一个div容器，里面使用router-view根据用户选择切换页面。

router-view 组件是 Vue Router 提供的一个内置组件，它会渲染当前路由匹配的组件。当用户导航到不同的路径时，router-view 会动态地切换显示不同的路由组件。

总结： App.vue 中的模板通过main.js被渲染到 index.html 中的 <div id="app"> 位置。

index.js——路由配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import Vue from 'vue'
import VueRouter from 'vue-router'

// 注册 VueRouter 插件到 Vue 实例
Vue.use(VueRouter)

const routes = [
  // 卖家管理模块路由
  {
    path: '/seller/',
    name: 'Seller',
    component: () => import(/* webpackChunkName: "seller" */ '../Seller/Manage.vue'),
    redirect: "/seller/home",  // 默认重定向到 /seller/home
    children: [
      // 子路由：卖家主页
      { path: 'home', name: 'Home', component: () => import(/* webpackChunkName: "seller" */ '../Seller/Home.vue') },
      // 子路由：订单管理
      { path: 'order', name: 'Order', component: () => import(/* webpackChunkName: "seller" */ '../Seller/Order.vue') },
      // 子路由：历史订单
      { path: 'history', name: 'History', component: () => import(/* webpackChunkName: "seller" */ '../Seller/History.vue') },
      // 子路由：花束管理
      { path: 'bouquet', name: 'Bouquet', component: () => import(/* webpackChunkName: "seller" */ '../Seller/Bouquet.vue') },
      // 子路由：库存管理
      { path: 'inventory', name: 'Inventory', component: () => import(/* webpackChunkName: "seller" */ '../Seller/Inventory.vue') },
    ]
  },
  // 用户管理模块路由
  {
    path: '/user/',
    name: 'User',
    component: () => import(/* webpackChunkName: "user" */ '../Seller/Manage.vue'),
  },
  // 监控模块路由
  {
    path: '/monitor/',
    name: 'Monitor',
    component: () => import(/* webpackChunkName: "monitor" */ '../Monitor/Manage.vue'),
    redirect: "/monitor/order",  // 默认重定向到 /monitor/order
    children: [
      // 子路由：订单监控
      { path: 'order', name: 'Order', component: () => import(/* webpackChunkName: "monitor" */ '../Monitor/Order.vue') },
      // 子路由：历史监控
      { path: 'history', name: 'History', component: () => import(/* webpackChunkName: "monitor" */ '../Monitor/History.vue') },
      // 子路由：实时监控
      { path: 'monitor', name: 'Monitor', component: () => import(/* webpackChunkName: "monitor" */ '../Monitor/Monitor.vue') },
    ]
  },
  // 登录页面路由
  {
    path: '/',
    name: 'Login',
    component: () => import(/* webpackChunkName: "login" */ '../Login/Login.vue')
  },
  // 注册页面路由
  {
    path: '/register',
    name: 'Register',
    component: () => import(/* webpackChunkName: "register" */ '../Login/Register.vue')
  },
  // 客户主界面路由
  {
    path: '/CustomerMain/',
    name: 'Customer',
    component: () => import(/* webpackChunkName: "customer" */ '../Customer/CustomerMain.vue'),
  },
  // 客户购买页面路由
  {
    path: '/CustomerBuy/',
    name: 'CustomerBuy',
    component: () => import(/* webpackChunkName: "customer-buy" */ '../Customer/CustomerBuy.vue'),
  },
  // 客户搜索页面路由
  {
    path: '/CustomerSearch/',
    name: 'CustomerSearch',
    component: () => import(/* webpackChunkName: "customer-search" */ '../Customer/CustomerSearch.vue'),
  },
  // 客户设计页面路由
  {
    path: '/CustomerDesign/',
    name: 'CustomerDesign',
    component: () => import(/* webpackChunkName: "customer-design" */ '../Customer/CustomerDesign.vue'),
  },
]

// 创建路由实例
const router = new VueRouter({
  mode: 'history',  // 使用 HTML5 History 模式，避免使用哈希值
  base: process.env.BASE_URL,  // 基础路径，通常与应用的部署路径一致
  routes  // 路由定义
})

// 导出路由实例，以便在 main.js 中使用
export default router

Vue语法

一个vue文件既可以作为一个完整的页面，也可以作为一个组件嵌入其他页面中。如上述文件结构中，components里的vue文件就是专门用作复用的组件的。

.vue文件结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
  <!-- 组件的 HTML 模板 -->
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script>
// 组件的 JavaScript 逻辑
export default {
  name: 'MyComponent',
  data() {
    return {
      title: 'Hello World',
      description: 'This is a description.'
    };
  }
}
</script>

<style scoped>
/* 组件的 CSS 样式 */
h1 {
  color: blue;
}
</style>

<template> 部分

作用：<template> 用于定义组件的 HTML 结构和布局，是组件的视图层。它描述了组件如何在浏览器中呈现。

<script> 部分

作用：<script> 用于定义组件的逻辑和行为，包括数据、方法、生命周期钩子等。它是组件的控制器。

<style> 部分

作用：<style> 用于定义组件的样式和视觉效果，包括布局、颜色、字体等。它是组件的外观层。