前言
个人学习笔记,本篇主要讲解VueCLI及使用VueCLI创建项目的步骤
一、什么是Vue CLI?
CLI是Command-Line Interface, 翻译为命令行界面;Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,俗称脚手架。它可以帮助开发人员自动化和简化应用程序的开发过程,提供了创建和配置Vue.js项目所需的所有工具和依赖项。Vue CLI允许您选择所需的插件和功能,快速搭建项目架构并开始编写代码。它还提供了开发服务器、构建和打包工具、自动化测试和部署等功能,使得开发人员可以更加高效地构建Vue.js应用程序。
二、怎么安装Vue CLI?
1.Node 版本要求
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n,nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
于安装目录打开cmd,输入以下任一命令:
npm install -g @vue/cli
# 或者
yarn global add @vue/cli
2.已安装旧版本
旧版本Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
如需升级全局的 Vue CLI 包,请输入以下任一命令:
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
3.安装完成
安装完成后你可以用这个命令来检查其版本是否正确:
vue --version
三、Vue CLI 创建Vue项目
1.Vue ui项目创建
打开cmd
vue ui
点击创建并选择适合的路径
![在这里插入图片描述](https://img-blog.csdnimg.cn/67e29d9ff6be4c76aaa8161be3891350.png)
输入项目名,包管理选择默认
![在这里插入图片描述](https://img-blog.csdnimg.cn/682e093c2b8a41909485cad3474fcd65.png)
1.1 预设
预设选择手动
![在这里插入图片描述](https://img-blog.csdnimg.cn/eb2d4f8fa0574474aa62fd0715b1b2c8.png)
1.2 项目功能
Vuex:是一个专为 Vue.js 应用程序开发的状态管理模式 + 库
Router:Vue中的路由,详情可见Vue Router
Linter/Formatter:可以让你的代码写的更严谨一些,通常是用来做报错提醒的
![请添加图片描述](https://img-blog.csdnimg.cn/230ca529affa40558fac05af6d10f7e2.png)
1.3 项目配置
Choose a version of Vue.js that you want to start the project with:你想用Vue的那个版本,这个就看大家的需求了
Use history mode for router? :就默认让它关闭就可以
Pick a linter / formatter config::代码的书写风格(建议选择 ESLint + Standard config)
Pick additional lint features: 一般不用管
![请添加图片描述](https://img-blog.csdnimg.cn/a509ce72f90642509681a267bc894532.png)
1.4 保存为预设
是否将这些配置保存为预设
![在这里插入图片描述](https://img-blog.csdnimg.cn/9e54ec15de02453d800bd2d1e4320db6.png)
1.5 导入插件、依赖
推荐导入:
Axios:Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
element ui:一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库(vue3+ 可以 导入element plus)![插件目录](https://img-blog.csdnimg.cn/b0249c72f20e434ca280fb0a03759543.png)
![添加插件](https://img-blog.csdnimg.cn/b3d3470e0ad54d8398440ce0067daf56.png)
1.6 项目运行
于任务中选择serve点击 运行 ,然后点击 启动app 即可
![请添加图片描述](https://img-blog.csdnimg.cn/3cf181e2ec7e4c04bb6cc76fb0c313b0.png)
2.cmd创建
2.1 创建一个存放项目的文件夹,并于该文件夹打开cmd
![在这里插入图片描述](https://img-blog.csdnimg.cn/4df60fd4251c4688abdf2de2c66e7b42.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/19398b6a68d04011a35364095d0d27c4.png)
2.2 创建项目
于cmd中输入 vue create 项目名
![在这里插入图片描述](https://img-blog.csdnimg.cn/d9efefb2f97b44feac78683681956bda.png)
2.3 preset
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性,方向键可以选择模块,这里选择手动选择特性
![在这里插入图片描述](https://img-blog.csdnimg.cn/b7ded3d2499e467083d719f78cf34c94.png)
2.4 手动选择特性
router和vuex几乎是必选的,可以使用方向键和空格进行选择
![在这里插入图片描述](https://img-blog.csdnimg.cn/bd5be845079649898a53412ab307e519.png)
2.5 版本选择
按所需选择
![在这里插入图片描述](https://img-blog.csdnimg.cn/aeb0b35c2009495c8f1d94f2c8121e9a.png)
2.6 保存为模板
是否将该项目保存为模板
![在这里插入图片描述](https://img-blog.csdnimg.cn/7f942280e7c14c4d8130c56b8e1994df.png)
2.7 代码规范
选择语法检测工具
ESLint with error prevention only(只检测错误)
ESLint + Standard config 自带linter和自动代码纠正,没有配置,自动格式化代码,可在编码早起发现规范问题和低级错误
ESLint + Prettier 能统团队的代码风格
![在这里插入图片描述](https://img-blog.csdnimg.cn/0042081465a244db8ff3444a8cf0fe76.png)
选择语法检查方式
Lint on save (保存就检测)
Lint and fex on commit ( 用户提交文件到git的时候检测 )
![在这里插入图片描述](https://img-blog.csdnimg.cn/d04a25c187204ab5a6ba9e375c08b08a.png)
2.8 配置文件存放位置
in dedicated config files(在专用配置文件中,就是单独管理)
in package.json(放在package.json里)
![在这里插入图片描述](https://img-blog.csdnimg.cn/a69c09e17c2446da91d9684ecb3e6a73.png)
2.9 保存为未来项目的预配置
![在这里插入图片描述](https://img-blog.csdnimg.cn/8febf54143584f6c954eeec82f9321fb.png)
2.10 完成
创建中
![在这里插入图片描述](https://img-blog.csdnimg.cn/b200502841e8409d96a7baec18a3bf4d.png)
创建完成
![在这里插入图片描述](https://img-blog.csdnimg.cn/bd423cc977a6405a9fdbf23b7ba856ae.png)
四、拓展
五、参考文献