Vue.js 简称为
Vue
, 是一套用于构建用户界面的
渐进式Web前端框架◆
与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用◆
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合◆
另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动◆
Vue 3
是2020年推出的最新版本,和上一个版本Vue 2相比,在功能和性能上都有了较大的改进
步骤:
- 安装一个基于 Chrome V8 引擎的 JavaScript 运行时Node.js。
- 在命令行窗口中输入npm -v查看npm的版本号。
- 在命令行窗口中输入npm i -g pnpm全局安装pnpm包管理工具。
- 在命令行窗口中进入要创建 Vue 项目的文件夹,输入 pnpm create vue 创建 Vue 项目,当出现“Project name:”提示时输入项目名位 myweb 并回车。 当出现“Add TypeScript?”提示时选择 Yes,在项目中添加 TypeScript 支持。 当出现“Add ESLint for code quality?”提示时选择 Yes,添加代码校验插件。 当出现“Add Prettier for code formatting?”提示时选择 Yes,添加代码格式 化插件。其它都选 No.
- 输入cd myweb进入项目目录,输入pnpm install安装packge.json中配置的所有依赖包。
- 输入pnpm add axios添加可以发送异步请求的Axios包。
- 输入pnpm add -D mockjs vite-plugin-mock cross-env添加用于模拟后端数据的三个包。
- 在Windows的菜单中找到Windows PowerShell菜单项,单击右键选择“以管理员身份运行”,在打开的窗口中输入set-executionpolicy remotesigned,当出现输入提示时输入Y。这样,在vs code中就可以执行pnpm的命令了。
- 在创建项目的命令行窗口中(已经进入到myweb目录)输入code .用vs code打开当前项目。
- 在vs code中选择:终端->新建终端,打开终端窗口,在终端窗口中输入pnpm dev启动当前项目,启动成功后按住Ctrl键,点击http://localhost:5173/,在浏览器中查看项目的首页。
- 在vs code中查看项目结构。