1. Vue3

  2. Node.js

  3. TypeScript

  4. 路由

  5. 接口请求

  6. 状态管理

  7. 实战项目

  8. 求职与未来发展

对于刚接触 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.js 或 npm 不了解的同学可以先看下我们的相关课件。

使用 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