Vue3项目搭建的4种方式

本文最后更新于 2024年4月14日 晚上

Vue介绍

特性

  • 渐进式框架

    能够自动追踪依赖的模板表达式和计算属性，提供 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API，使读者更加容易理解，能够更快上手。

  • 双向数据绑定

    声明式渲染是数据双向绑定的主要体现，同样也是 Vue.js 的核心，它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。

  • 指令

    Vue.js 与页面进行交互，主要就是通过内置指令来完成的，指令的作用是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

  • 组件化

    组件可以扩展 HTML 元素，封装可重用的代码。

  • Vue 路由管理

    Vue-Router 是 Vue 全家桶中的路由管理插件，与 Vue.js 深度集成，用于构建单页面应用。Vue 单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，传统的页面是通过超链接实现页面的切换和跳转的。

  • Vue 状态管理

    Vuex 是 Vue 全家桶中的状态管理插件，与 Vue.js 深度集成，用于管理应用的状态。

  • Vue 脚手架

    Vue-Cli 是 Vue 全家桶中的脚手架工具，给 Vue 应用提供了开箱即用的功能，让开发者能够快速创建、开发、构建一个完整的 Vue 项目。

DOM操作

网页是由 DOM 组合的视图结构，再加上 CSS 样式的修饰，使用 JavaScript 接受用户的交互请求，并通过事件机制来响应用户交互操作而形成的。

Jquery是一个经典的DOM操作库。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jquery Dom测试</title>
    <!-- 引入 jquery 框架 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div id="root">
      hello world
    </div>
    <script>
      $("#root").on("click", function(event) {
        event.target.innerText = "hello DOM";
      });
    </script>
  </body>
</html>

数据绑定

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue MVVM测试</title>
    <!-- 引入 Vue.js 框架 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.21/vue.global.prod.min.js"></script>
  </head>
  <body>
    <div id="root">
      <div @click="handleClick">{{msg}}</div>
    </div>
    <script>
      Vue.createApp({
        data() {
          return {
            msg: "hello world",
          };
        },
        methods: {
          handleClick() {
            this.msg = "hello MVVM";
          },
        },
      }).mount("#root");
    </script>
  </body>
</html>

项目搭建

通过CDN引入

1
<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>

你可以使用官方提供的资源包（这里以 3.0.11 版本为例）：

带 runtime 跟不带 runtime 的资源包，比如：vue.runtime.global.js 跟 vue.global.js：

  • vue.runtime.global.js：除了编译 template 功能以外的 Vue 代码。
  • vue.global.js：包含了编译 template 功能完整的 Vue 代码。

如果你的项目需要用到编译 template 属性的功能，比如：

1
2
3
createApp({
  template: "<app></app>",
});

Vue 最后是需要将 template 编译成 render 方法进行渲染的，所以你就需要用到 Vue 的编译功能，因此就需要引入带有编译功能的 Vue 代码（vue.global.js）。

prod 和 prod 后缀的资源包

比如：vue.global.js 跟 vue.global.prod.js。

带 prod 的意思就是 “是否经过压缩混淆过后的代码”，prod 的全称是 production，也就是生产环境的意思。

当项目处在开发阶段的时候，用没有 prod 后缀的代码，当项目需要发布上线的时候，用带 prod 后缀的代码。

CDN引入示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue use CDN</title>
    <!-- 引入 全量 Vue.js 代码 -->
    <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="root">
      <div>{{msg}}</div>
    </div>
    <script>
      Vue.createApp({
        data() {
          return {
            msg: "hello CDN",
          };
        },
      }).mount("#root");
    </script>
  </body>
</html>

通过NPM安装

1
2
3
4
5
6
7
8
9
10
# 创建工程目录
mkdir ./vue-npm-demo 
# 进入目录并初始化npm项目
cd vue-npm-demo && npm init -y
# 安装webpack依赖
npm install -D webpack@4.46.0 webpack-cli@4.10 webpack-dev-server@3.11.2 vue-loader@16.1.2 @vue/compiler-sfc@3.0.11 html-webpack-plugin@3.2.0
# 安装vue
npm install vue@3.0.11
# 创建webpack配置文件
touch ./webpack.config.js

添加webpack.config.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
const path = require("path");
module.exports = {
  target: "web",
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
  plugins: [
    new (require("vue-loader").VueLoaderPlugin)(),
    new (require("html-webpack-plugin"))({
      template: path.resolve(__dirname, "./public/index.html"), // 指定模版文件
    }),
  ],
  devServer: {
    host: "0.0.0.0",
    disableHostCheck: true,
    contentBase: path.resolve(__dirname, "./public"), // 设置一个 express 静态目录
    port: 8080,
    hot: true,
    sockPort: "location",
  },
};

配置完Webpack后，创建webpack的入口文件。

在 vue-npm-demo 工程目录下创建一个 src 目录，并且在 src 目录下创建一个 index.js 文件：

1
mkdir ./src && touch ./src/index.js

将以下内容写入到 vue-npm-demo/src/index.js 文件：

1
2
3
4
5
import { createApp } from "vue";
// 引入 App.vue 组件
import App from "./App.vue";
// 渲染 app
createApp(App).mount("#app");

然后创建一个 App.vue 组件。

在 vue-npm-demo/src 目录下创建一个 App.vue 文件：

1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <div>{{ msg }}</div>
</template>
<script>
export default {
  setup() {
    return {
      msg: "hello world",
    };
  },
};
</script>

为了能让项目跑起来，我们还需要创建应用的入口文件 index.html。

我们在 vue-npm-demo 目录下创建一个 public 目录，并且在 vue-npm-demo/public 目录下创建一个 index.html 文件：

1
mkdir ./public && touch ./public/index.html

将以下内容写入到 vue-npm-demo/public/index.html 文件：

1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <noscript>your browser should support javascript!</noscript>
    <div id="app"></div>
    <!-- html-webpack-plugin 将自动引入入口文件 -->
  </body>
</html>

在 vue-npm-demo 工程目录下执行以下命令开启 webpack 服务：

1
2
3
4
# 设置环境变量
export NODE_OPTIONS=--openssl-legacy-provider
# 开启 webpack 服务
npx webpack serve --mode=development

Webpack 搭建的 Vue 项目就搞定了。

通过Vue-cli安装

执行以下命令安装

1
2
npm install -g @vue/cli@4.5.12 && vue create vue-cli-demo
# 安装完根据提示选择(选择：Vue3和npm)

在vue-cli-demo 工程目录下创建一个 vue.config.js 文件：

1
touch ./vue-cli-demo/vue.config.js

将以下内容写入到 vue-cli-demo/vue.config.js 文件：

1
2
3
4
5
6
7
8
9
module.exports = {
  configureWebpack: {
    devServer: {
      host: "0.0.0.0",
      port: 8080, 
      disableHostCheck: true, 
    },
  },
};

进入到 vue-cli-demo 工程目录，并且在 vue-cli-demo 目录下执行以下命令启动项目：

1
2
3
# 设置环境变量
export NODE_OPTIONS=--openssl-legacy-provider 
cd vue-cli-demo && npm run serve

Vue-Cli 脚手架项目就搭建完了。

通过Vite安装

1
2
npm init vite vue-vite-demo
# 在后续的选择中选择Vue项目和JavaScript

进入到 vue-vite-demo 项目目录并执行 npm 初始化：

1
cd vue-vite-demo && npm install

修改 vue-vite-demo 目录下的 vite.config.js 文件：

1
2
3
4
5
6
7
8
9
10
11
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    host: "0.0.0.0", 
    port: 8080, 
  },
});

执行命令启动项目：

1
npm run dev

这样就完成了通过Vite搭建项目。

（完）

技术 > Vue
#Vue #Vite #NPM #Webpack
Vue3项目搭建的4种方式
https://maojun.xyz/blog/2024/04/Vue3项目搭建的4种方式.html
作者
毛 俊
发布于
2024年4月14日
更新于
2024年4月14日
许可协议