对于刚接触 Vue 的同学,我们先试着跑起第一个 Vue 的代码,然后再尝试去熟悉其语法。

一般来说我们开发 Vue 的有两种方式。

  1. 通过 CDN 或本地 JavaScript 文件引入 Vue 的文件。
  2. 搭配 Node.js 使用。

CDN 或本地 JavaScript (不推荐)

我们可以通过以下代码从 CDN 引入最新的 Vue 代码。 vue@next 代表着最新版本的 Vue 代码,不过更推荐引入指定的 Vue 版本,比如 vue@3.2.33 。因为在版本升级过程中难免会有接口的变化与 bug 的引入,

<script src="https://unpkg.com/vue@next"></script>

unpkg在国内经常被墙,也可以使用bootcdn等其他国内的 CDN 节点。

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.33/vue.global.js"></script>

如此我们便可以运行一个最小的 demo 了。

$$jsdemo$$
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Vue demo</title>
    </head>
    <body>
        <div id="app">
            <p>{{ message }}</p>
            <input v-model="message" />
        </div>
        <!-- 国内被墙 -->
        <!-- <script src="https://unpkg.com/vue@next"></script> -->
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.33/vue.global.js"></script>
        <script>
            const App = {
                data() {
                    return {
                        message: "修改我试试",
                    }
                },
            }
            Vue.createApp(App).mount("#app")
        </script>
    </body>
</html>

搭配 Node.js (推荐)

我们可以用 npm 来安装 Vue 的包,并自行配置所需的其他工具,不过这一般是成熟公司的玩法。一般开发者推荐使用 Vue CLI(Vue 官方的 CLI) 或 Vite 来构建。由于 Vite 是由 Vue 团队开发并强烈推荐的一款构建工具,所以这里只讲一下如何通过 Vite 来构建一个 Vue 项目。

对于 Node.jsnpm 不了解的同学可以先看下我们的相关课件

使用 Vite 构建

生成项目

我们用以下命令生成一个 Vue 项目。

npm init vue@latest

如果一来便生成了以下结构的项目文件夹:

  • .vscode:vscode 配置。
  • public:静态资源文件夹。
  • src:项目代码文件夹。
  • .gitignore:git 隐藏文件配置。
  • index.html:网站首页 index.html。
  • package.json:npm 的项目配置,包括项目名、版本、依赖的第三方包等。
  • README.md:项目介绍,markdown 格式,如果上传到 github 将会在项目页正文展示。
  • vite.config.js:vite 的配置文件

image

开发环境

对于新生成的项目,我们需要在控制台下进入项目的路径,然后执行以下命令,。

npm install

我们看一下 install 之后的文件夹变化,多了两个文件,这两个文件可以参考下 npm 的章节

  • node_modules:保存当前项目所需第三库的文件夹。
  • package-lock.json:记录第三方库与第三方库所依赖的第三方库的版本号、来源、md5 值等相关信息,只要这个文件一致那么可以保证每次 install 之后的第三方库代码文件都会一致。

image

执行以下命令,运行开发模式。

npm run dev

image

我们直接打开 http://localhost:3000/ 就能打开页面了。

生产环境

我们刚刚是在测试环境下运行的项目,测试环境会输出很多额外的调试信息,而且是实时编译,会导致速度很慢,不适合部署到生产环境。接下来我们看下如何部署到生产环境。

需要部署到生产环境,则运行以下命令。

npm run build

image

build 完成后项目中会多出 dist 文件夹,里面便是生成的最终文件。实际开发过程中会把 dist 文件夹部署到服务器,然后将 nginx 之类的代理工具的网站根目录指向 dist 的路径。

image

当然,我们可以用 vscode 单独打开 dist 目录,然后通过 live server 插件打开,在本地体验一下。

image