子卿全栈系列💯

Appearance

🔠
📤
🕵️
📈0️⃣

快速上手 ​

前提条件

  • 熟悉命令行
  • 已安装 18.0 或更高版本的 Node.js

1. 通过命令行安装 ​

1.1. 安装 ​

shell
npm create vue@latest
shell
pnpm create vue@latest
shell
yarn create vue@latest
shell
bun create vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

shell
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

1.2. 运行 ​

shell
cd <your-project-name>
npm install
npm run dev
shell
cd <your-project-name>
pnpm install
pnpm run dev
shell
cd <your-project-name>
yarn
yarn dev
shell
cd <your-project-name>
bun install
bun run dev

你现在应该已经运行起来了你的第一个 Vue 项目！

可以直接试试官方的 演练场

1.3. 发布 ​

当你准备将应用发布到生产环境时，请运行：

shell
npm run build
shell
pnpm run build
shell
yarn build
shell
bun run build

2. 通过 CDN 引入 ​

2.1. CDN 开源服务 ​

CDN 为用户提供了快速访问和加载开源库文件的服务。以下是一些广泛使用的 CDN 服务：

1. BootCDN ​

BootCDN 提供多种常用 JavaScript 库和 CSS 框架的 CDN 服务，例如 jQuery、Vue.js、React 等。它是由 Bootstrap 中文网支持并维护的，特别适合国内用户使用。

官网地址: https://www.bootcdn.cn/

2. unpkg.com ​

unpkg.com 一个流行的 CDN 服务，可以直接通过官网搜索并使用 npm 包。这个服务有时可能不稳定，或者在某些地区无法访问。

官网地址: https://unpkg.com/

3. jsdelivr.com ​

jsdelivr 提供 npm 包加速的 CDN 服务，使用方法类似 unpkg.com。同样地，它也可能会遇到稳定性和访问性的问题。

官网地址: https://jsdelivr.com/

CDN 链接推荐

  • 推荐使用 jsDelivr 作为 CDN 服务
  • jsDelivr 会自动缓存库文件，并且具有非常快的网络响应速度。
  • jsDeliver CDN 链接: jsdelivr/package/npm/vue

2.2. 引入 CDN 案例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test-vue-cdn</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.11/dist/vue.global.min.js"></script>
  </head>

  <body>
    <div id="app1">{{ message }}</div>
    <div id="app2"></div>
    <script>
      {
        const { createApp, ref } = Vue;
        createApp({
          setup() {
            const message = ref("Hello vue!");
            return { message };
          },
        }).mount("#app1");
      }
    </script>
    <script>
      {
        const { createApp, ref } = Vue;
        const App = {
          setup() {
            const message = ref("Hello vue!");
            return { message };
          },
          template: `<h3>{{ message }}</h3>`,
        };
        createApp(App).mount("#app2");
      }
    </script>
  </body>
</html>

2.3. CDN 案例演示 ​




test-vue-cdn.html 资源加载中...