1. Vue

  2. Node.js

  3. Vue Router

  4. Axios

  5. Vuex

对于刚接触 Vue 的同学,我们先试着跑起第一个 Vue 的代码,然后再尝试去熟悉其语法。 一般来说我们开发 Vue 的有两种方式。 1. 通过 CDN 或本地 JavaScript 文件引入 Vue 的文件。 2. 搭配 Node.js 使用。 # CDN 或本地 JavaScript (不推荐) 我们可以通过以下代码从 CDN 引入最新的 Vue 代码。 `vue@next` 代表着最新版本的 Vue 代码,不过更推荐引入指定的 Vue 版本,比如 `vue@3.2.26` 。因为在版本升级过程中难免会有接口的变化与 bug 的引入, ```javascript <script src="https://unpkg.com/vue@next"></script> ``` 如此我们便可以运行一个最小的 demo 了。 ```html <!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" /> <script src="https://unpkg.com/vue@next"></script> <title>Vue demo</title> <script> const Counter = { data() { return { message: "修改我试试" } } } window.onload = function () { Vue.createApp(Counter).mount("#app") } </script> </head> <body> <div id="app"> <input v-model="message" /> <p>{{ message }}</p> </div> </body> </html> ``` # 搭配 Node.js (推荐) 我们可以用 npm 来安装 Vue 的包,并自行配置所需的其他工具,不过这一般是成熟公司的玩法。一般开发者推荐使用 Vue CLI(Vue 官方的 CLI) 或 Vite 来构建。由于 Vite 是由 Vue 团队开发并强烈推荐的一款构建工具,所以这里只讲一下如何通过 Vite 来构建一个 Vue 项目。 对于 [Node.js](https://3yya.com/courseware/chapter/14) 或 [npm](https://3yya.com/courseware/chapter/15) 不了解的同学可以先看下我们的[相关课件](https://3yya.com/courseware/chapter/14)。 ## 使用 Vite 构建 ### 生成项目 我们用以下命令生成一个 Vue 项目。 ```bash npm init vite@latest <project-name> -- --template vue ``` - **npm init**:尝试运行命令,如果不存在则先下载再运行。 - **vite@latest**:vite 的最新版本。 - **\<project-name\>**:你要生成的项目名。 - **--template vue**:项目模板参数,这里值是 `vue`,可选的有 `vanilla`,`vanilla-ts`,`vue`,`vue-ts`,`react`,`react-ts`,`preact`,`preact-ts`,`lit`,`lit-ts`,`svelte`,`svelte-ts` 等,具体查看 [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite)。 如果一来便生成了以下结构的项目文件夹: - **.vscode**:vscode 配置。 - **public**:静态资源文件夹。 - **src**:项目代码文件夹。 - **.gitignore**:git 隐藏文件配置。 - **index.html**:网站首页 index.html。 - **package.json**:npm 的项目配置,包括项目名、版本、依赖的第三方包等。 - **README.md**:项目介绍,markdown 格式,如果上传到 github 将会在项目页正文展示。 - **vite.config.js**:vite 的配置文件 ![image](https://qiniu.3yya.com/3ee8f6eb71205e34c0556f561d112aef/3ee8f6eb71205e34c0556f561d112aef.png) ### 开发环境 对于新生成的项目,我们需要在控制台下进入项目的路径,然后执行以下命令,。 ```bash npm install ``` 我们看一下 install 之后的文件夹变化,多了两个文件,这两个文件可以参考下 [npm 的章节](https://3yya.com/courseware/chapter/15)。 - **node_modules**:保存当前项目所需第三库的文件夹。 - **package-lock.json**:记录第三方库与第三方库所依赖的第三方库的版本号、来源、md5 值等相关信息,只要这个文件一致那么可以保证每次 `install` 之后的第三方库代码文件都会一致。 ![image](https://qiniu.3yya.com/e70ab16a8126fae18034bc937363db2c/e70ab16a8126fae18034bc937363db2c.png) 执行以下命令,运行开发模式。 ```bash npm run dev ``` ![image](https://qiniu.3yya.com/31547128a31b4faf7464ac7b82ec887a/31547128a31b4faf7464ac7b82ec887a.png) 我们直接打开 [http://localhost:3000/](http://localhost:3000/) 就能打开页面了。 ### 生产环境 我们刚刚是在测试环境下运行的项目,测试环境会输出很多额外的调试信息,而且是实时编译,会导致速度很慢,不适合部署到生产环境。接下来我们看下如何部署到生产环境。 需要部署到生产环境,则运行以下命令。 ```bash npm run build ``` ![image](https://qiniu.3yya.com/fcb911ed0afa14b7f45a23b46d518b5d/fcb911ed0afa14b7f45a23b46d518b5d.png) build 完成后项目中会多出 `dist` 文件夹,里面便是生成的最终文件。实际开发过程中会把 `dist` 文件夹部署到服务器,然后将 `nginx` 之类的代理工具的网站根目录指向 `dist` 的路径。 ![image](https://qiniu.3yya.com/9d693707fa31ce2dc787b7d253973826/9d693707fa31ce2dc787b7d253973826.png) 当然,我们可以用 vscode 单独打开 dist 目录,然后通过 live server 插件打开,在本地体验一下。 ![image](https://qiniu.3yya.com/4a3f35ad9f5d40d2fb704d8f7c23b18e/4a3f35ad9f5d40d2fb704d8f7c23b18e.png)