安装VUE脚手架
0 前言
当我们使用 Vue.js 进行项目开发时,Vue CLI(脚手架)是一个非常有用的工具,它提供了快速搭建、开发和维护 Vue 项目的便捷方式,我们将在下面的内容讲解它的作用、安装、项目创建、配置以及一些常见操作。
1 介绍
Vue CLI 是 Vue.js 官方提供的一个全局安装的工具,用于快速搭建 Vue.js 项目。
- 快速创建新项目。
- 提供项目结构和开发环境配置。
- 集成了开发服务器,支持热重载。
- 丰富的插件系统。
- 简化了打包和部署过程。
简单来说,就是通过它可以一键安装一个可以跑起来的vue项目,搭建属于你自己的网站。
2. 安装 Vue CLI
2.1 基础环境
确保你的系统上已经安装了 Node.js 和 npm。可以参考我们上一篇文章。
2.2 全局安装 Vue CLI
(1)切换镜像源
因为npm的资源默认采用国外的,国内执行对应的安装口令会比较慢,所以我们可以把npm资源切换到国内,这样安装框架的速度就会提升。
这里我们切换到国内的淘宝镜像。
npm config set registry https://registry.npm.taobao.org
运行完成后并没有提示,但是可以运行查看口令,验证是否切换成功。
npm config get registry
(2)打开cmd 命令窗口,运行安装口令。
npm install -g @vue/cli
最后如上图显示,我们就完成我们VUE脚手架的安装了,我们在命令窗口用口令查看当前脚手架版本。
vue -V
验证成功后,接下来就到了我们激动人心的创建自己第一个vue项目的环节了。
3. 创建新项目
3.1 使用 Vue CLI 创建项目:
(1)在命令窗口执行安装口令
vue create my-vue-app
提示默认的yarn环境很慢,可以切换新的环境,我们这里可以选Y。这个切换镜像的步骤不一定都有,如果没有,则可以切换到下一步。
(2)选择模版
这里提供了三个选项,分别为VUE3默认模版、VUE2默认模版、其他。
这里提供的默认模版,让我们避免第一次创建需要设置很多东西。
但是我们不用默认提供的两个默认版本,我们选择第三个选项,因为默认选项有很多常用的模块都不安装。
我们这里选择“Manually select features”。
(3)选择对应的模块
其中项目模块
字段 | 是否选 | 作用 |
---|---|---|
Babel | 必选 | 用于确保代码兼容性 |
TypeScript | 语法框架,可以不选,默认用js | |
Progressive Web App (PWA) Support | 利用现代 Web 技术提供更好用户体验的应用程序类型。 | |
Router | 必选 | vue路由 |
Vuex | 必选 | 用来存储通用变量,或者状态的 |
CSS Pre-processors | 必选 | CSS Pre-processors 是一类用于增强和扩展 CSS 功能的工具,它们允许开发者使用一些在标准 CSS 中不可用的特性,如变量、嵌套规则、混入(Mixins)等,比如可以用Sass、Less等 |
Linter / Formatter | 必选 | 进行代码格式校验。 |
Unit Testing | ||
E2E Testing |
选择完后,直接回车。
(4)选择版本
我们这里就用最新的3.x版本,然后回车。
(5)选择路由显示效果
vue路由显示有两种,一种是路由带个#号,一种是不带,我们这里选择是。
(6)选择CSS预处理器
看自己需要,我们选第一个。
(7)选择代码规范
选择敲代码的时候要执行哪些规范,我们这里可以选第一个。
(8)选第一个
(9)选择Babel等配置放在哪个文件,我们选择放在package.json就行。
(10)是否把当前的选项作为一个默认模版,以后再创建新的vue项目的时候,可以直接选对应模版就行,不用再操作选这些设置,我们这里选择否。
(11)最后选择模块安装包管理器,我们这里选npm。
(12)最后确认创建
经过上面步骤我们就创建好一个vue项目了,我们可以执行上面蓝色口令运行我们的第一个项目了。
// 进入我们刚刚创建的文件夹
cd my-vue-app
// 执行服务
npm run serve
如上图显示,就表示程序运行成功了,我们直接在浏览器访问一下试试。
(13)访问链接
上面的页面就是我们创建的vue项目的默认首页。
到此我们就创建成功一个属于我们自己的vue项目啦!
4 结语
在创建完项目后,我们下一篇文章会向各位小伙伴讲解项目的文件结构以及作用,让小伙伴们上手改自己的项目。