Vue3学习(一)之 创建Vue CLI项目
一、官方文档
-
Vue3
文档 - vuejs
https://www.vue3js.cn/docs/zh/
Vue核心功能:数据绑定 -
Vue CLI
文档
https://cli.vuejs.org/zh/guide/
Vue CLI = Vue.js + 一堆组件
二、创建Vue CLI
项目
1、安装Vue CLI
淘宝镜像
npm get registry --显示当前的镜像网址
npm config set registry http://registry.npm.taobao.org -- 使用淘宝的镜像网址
安装Vue CLI
npm install -g @vue/cli@4.5.9
2、创建web
应用
vue create web
安装过程如下:
输入上面命令后,选择Manually select features
接着选择对应需要的必选项,*号必选
选择3.0版本
是不是使用类component,输入N
Use Babel ...transpiling JSX)? (Y/n),选择N
地址栏是否使用#,我们选择Y
代码校验风格,我们选仅报错的即可
什么时候校验,我们选择save
Babel, ESLint, etc文件怎么管理,我们选择第一个单独
是否将上面的配置保存成一个模板,我们选择Y
保存的名字可自定义
看到如下图,证明安装成功
3、启动web应用
费命令行启动。拖动到右侧双击即可
三、Vue CLI
项目结构讲解
- index.html, main.ts, app.vue三者关联
- public和assets两个静态资源文件的引用方法
public不参与打包
assets会被打包 - index.html引入外部静态文件用<%= BASE_URL %>
- 子文件里的.gitignore文件是会生效的,里面配置的文件规则,是相对当前.gitingore文件所在位置
- README.md只有根目录下的生效
- package.json 作用类似于pom.xml
- eslintrc.js 是一把双刃剑
- Vue CLI需要编译才能发布
优秀不够,你是否无可替代
软件测试交流QQ群:721256703,期待你的加入!!
欢迎关注我的微信公众号:软件测试君

【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库