Vue-CLI4创建Vue项目
# Vue-CLI4 创建 Vue 项目
# 1. 准备工作
# 1.1 安装 Node.js
安装过程很简单,在官网下载安装包,点击安装,一直下一步直到安装完成即可,新版本的 Node.js 会自动添加环境变量,不需要再手动添加环境变量,如有疑问,可自行前往环境变量查看。
Node.js 官网:https://nodejs.org/zh-cn/ (opens new window)
出现下图所示表示 Node 安装完成。
# 1.2 检查安装的 Node.js 是否成功及其版本号
进入 cmd(Windows+R 进入运行界面,输入 cmd 回车即可)窗口,在 cmd 窗口中输入命令:
node -v
若出现 Node.js 的版本号,则表示 Node.js 安装成功。如下图所示
# 1.3 检查 npm 版本,并修改镜像为淘宝镜像
安装 Node 后会自动安装 npm,可以通过命令查看 npm 的版本号
npm -v
若出现 npm 的版本号,即表示 npm 已经安装成功,如下图所示
在命令行输入如下命令,配置 npm 镜像为淘宝镜像(注意,目前淘宝的镜像源地址已更换为 https://registry.npmmirror.com/)
<!-- npm config set registry https://registry.npm.taobao.org -->
npm config set registry https://registry.npmmirror.com/
设置之后可通过如下命令查看是否成功配置为淘宝镜像
npm config get registry
若出现淘宝镜像的 URL 路径则表示配置淘宝镜像成功,如下图所示
当然,也可以安装 cnpm,通过 cnpm 来执行 npm 命令,安装 cnpm 命令如下
npm install -g cnpm --registry=https://registry.npmmirror.com/
//--registry=https://registry.npmmirror.com/ 为淘宝的镜像地址,下载过慢时可以添加此地址
cnpm -v //查看cnpm是否安装成功及其版本号,若出现版本号则表示安装成功。
出现如下图所示,表示环境准备工作完成
# 2. 安装 Vue-CLI4.5
因为 Vue-CLI4.5 和之前的 3.0 以下的老版本不一样,安装命令也有所不同。
npm install -g @vue/cli //全局安装vue-cli最新版本
安装过程中若下载过慢,可以使用 cnpm 进行安装,或采取上述方式,在命令后加上淘宝镜像地址
安装之后查看 Vue-CLI 是否安装成功及其版本号
vue -V //注意,此时需要使用大写的-V,小写的-v会报错
出现下图所示表示 Vue 脚手架(Vue-CLI4.5)安装成功
# 3. 创建 Vue 项目
# 3.1 进入创建项目目录
根据自己的需要进入想要创建 Vue 项目的目录,然后通过 cmd 窗口执行命令
(可通过在目录窗口上方的路径地址栏中输入 cmd 进入当前目录,也可以从 c 盘逐步进入当前目录)
vue create test001 //创建项目,test001位项目名,项目名中不允许出现大写字母
# 3.2 选择自定义配置
通过键盘中的向下箭头控制,选择 Manually select features 手动配置
如下图所示。
手动配置选项解释
序号 | 选项 | 描述 | 选择 |
---|---|---|---|
1 | Choose Vue version | 选择Vue版本 | Y |
2 | Babel | vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5 | Y |
3 | TypeScript | TypeScript通过添加类型来扩展JavaScript。通过了解JavaScript,TypeScript可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器,任何操作系统,任何运行JavaScript的地方。 完全开源 | |
4 | Progressive Web App (PWA) Support | 渐进式Web应用程序(PWA)支持 | |
5 | Router | 路由 | |
6 | Vuex | Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 | |
7 | CSS Pre-processors | CSS预处理器,预处理器:比如要用sass或者cssNext就要按照人家规定的语法形式,就是用人家的语法去编写,然后人家把你编写的代码转成css。 | |
8 | Linter / Formatter | 格式化程序 | Y |
9 | Unit Testing | 单元测试 | |
10 | E2E Testing | 端到端(end-to-end) |
# 3.3 选择手动配置中的选项
向上向下箭头控制方向,空格进行选中,可选择如下配置,引入 Router 和 Vuex 以及 CSS 预处理器,选择完成回车即可
# 3.4 选择 Vue 版本
Vue 3 的生态截止目前(2021-04-08)还不太健全,建议非尝鲜项目选择 Vue 2.x。
# 3.5 选择是否使用历史模式
此处建议选择不使用,即输入 N,选择使用 hash 模式
# 3.6 选择 CSS 预处理器
此处建议选择 Sass/SCSS(with dart-sass),即直接选择回车即可。
node-sass 是自动编译实时的,dart-sass 需要保存后才会生效
# 3.7 选择 eslint 校验规则
此处建议选择默认配置,即直接回车即可。
# 3.8 选择什么时候进行代码校验
此处建议选择第一个,即直接回车即可
Lint on save 保存时检查, Lint and fix on commit 提交时检查
# 3.9 选择如何存放配置
此处建议选择第二个配置,即存放到 package.json 文件中。
In dedicated config files 存放到独立文件中,In package.json 存放到 package.json 中
# 3.10 选择是否保存本次配置
建议选择 N,即不保存,否则以后创建项目修改不配置不太方便
# 3.11 等待创建项目
若出现如下界面,表示项目创建完成。
# 4. 运行创建的 Vue 项目
# 4.1 进入创建的 Vue 项目的目录
此处选择进入 test001(即创建的项目 test001 的目录)
# 4.2 在项目目录下执行命令运行项目
npm run serve
出现如下页面表示运行成功。
# 4.3 在浏览器中查看项目运行是否成功
在浏览器中打开上述 Vue 项目部署的地址,看到下图所示即表示项目创建运行成功。
# 5. 也可以通过 vscode 打开项目,并运行项目
# 5.1 打开文件夹
在页面左上角选择 File,在下拉菜单中选择 Open Folder(打开文件夹)
# 5.2 打开控制台
找到项目所在目录,打开,然后在页面上方选择打开新的控制台(Terminal)
npm run serve //在控制台输入此命令即可
//具体命令可在package.json文件的scripts中查看
项目执行命令查看(vue-cli-service serve 对应的前面的属性即为 npm run 后面的属性,例如,下图中项目执行命令为 npm run serve
)
# 5.3 查看项目是否运行成功
点击项目部署地址在浏览器中打开,若出现如下图所示页面,表示项目创建运行成功