Vue3
Node.js
TypeScript
路由
接口请求
状态管理
实战项目
求职与未来发展
对于刚接触 Vue 的同学,我们先试着跑起第一个 Vue 的代码,然后再尝试去熟悉其语法。
一般来说我们开发 Vue 的有两种方式。
- 通过 CDN 或本地 JavaScript 文件引入 Vue 的文件。
- 搭配 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 的配置文件
开发环境
对于新生成的项目,我们需要在控制台下进入项目的路径,然后执行以下命令,。
npm install
我们看一下 install 之后的文件夹变化,多了两个文件,这两个文件可以参考下 npm 的章节。
- node_modules:保存当前项目所需第三库的文件夹。
- package-lock.json:记录第三方库与第三方库所依赖的第三方库的版本号、来源、md5 值等相关信息,只要这个文件一致那么可以保证每次
install
之后的第三方库代码文件都会一致。
执行以下命令,运行开发模式。
npm run dev
我们直接打开 http://localhost:3000/ 就能打开页面了。
生产环境
我们刚刚是在测试环境下运行的项目,测试环境会输出很多额外的调试信息,而且是实时编译,会导致速度很慢,不适合部署到生产环境。接下来我们看下如何部署到生产环境。
需要部署到生产环境,则运行以下命令。
npm run build
build 完成后项目中会多出 dist
文件夹,里面便是生成的最终文件。实际开发过程中会把 dist
文件夹部署到服务器,然后将 nginx
之类的代理工具的网站根目录指向 dist
的路径。
当然,我们可以用 vscode 单独打开 dist 目录,然后通过 live server 插件打开,在本地体验一下。