【前端环境3】使用 vue ui 图形化界面创建vue项目 + vue项目目录结构
🌈你好呀！我是 是Yu欸 🌌 2024每日百字篆刻时光，感谢你的陪伴与支持 ~🚀 欢迎一起踏上探险之旅，挖掘无限可能，共同成长！
写在最前面
分享25本经典「前端书籍」，点击链接即可保存。
链接：https://pan.quark.cn/s/a0f37c305fac
提取码：rJrx
前端相关专栏
前端环境姊妹篇：
【前端环境1】安装nvm
【前端环境2】代码管理工具：安装sourcetree
【前端环境3】已有代码配置vue环境 + 使用 vue ui 图形化界面创建vue项目 + vue项目目录结构
使用 vue ui 图形化界面创建 vue 项目是一种方便的方式，可以直观地操作和查看项目的配置和依赖。
零、已有代码 - 配置Vue2环境
PS E:\ui\wishCode> npm run serve
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.> [email protected] serve
> vue-cli-service serve
'vue-cli-service' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
要配置Vue2环境，需要执行以下步骤：
- 切换到需要的node环境，如
nvm use 12.18.0 //使用特定版本确保计算机上已安装Node.js。可以在终端或命令提示符中运行node -v命令来检查是否已安装Node.js。如果未安装，请参考：【前端环境1】安装nvm
输入
npm - v
命令来验证 Node.js 和 npm 是否正确安装。
- 安装Vue2： 先检查是否已经安装
vue --version，如果：@vue/cli 5.0.8，则已安装，跳过后面这一步。如果未安装：
npm install -g @vue/cli
这将安装Vue.js的最新版本。
- （不需要）在项目文件夹中，运行
npm init -y命令来初始化一个新的npm项目：
这将创建一个新的
package.json
文件，其中包含您项目的配置信息。
- 在项目文件夹中打开终端或命令提示符窗口，然后输入
npm install并按回车键即可开始安装项目依赖。 - 在终端或命令提示符中运行以下命令来启动开发服务器：
npm run serve
这将启动一个开发服务器，并在浏览器中打开您的HTML文件。
现在，您已经成功配置了Vue2环境，并且可以开始开发Vue应用程序了。
一、从零搭建 - 使用 vue ui 图形化界面创建vue项目
打开一个要创建项目的文件夹，选中文件路径然后输入‘cmd’，回车，打开命令行界面
然后直接输入命令
vue ui
,等待加载。
vue ui
，如果敲了回车不生效
不要着急
先
Vue -h
检查一下
此时Commands中少了一个ui的相关信息
在控制面板中运行一下两行命令：
//卸载老版本
npm uninstall vue-cli
//安装新版本
npm install -g @vue/cli
操作完成以后再一次的vue -h检查一下，此时你会发现Commands中多了一个ui的相关信息
继续，
vue ui
成功后会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程；
创建vue项目
选择创建，在此可再选择项目所在目录，然后在下方选择在此创建新项目；
然后进入详情页，给项目命名、选择包管理器。这里选择 npm，接着点下一步；
手动配置依赖项
进入预设页面，选择 手动 ，便可以手动选择安装哪些依赖项，或使用其他已经预设好的依赖项组合。这里选择
手动
，然后点下一步；
进入功能页面，选择开发需要的功能。
（这里我选择的是：14567 ）
(1. Babel：转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
(2. TypeScript：支持使用 TypeScript 书写源码
(3. Progressive Web App (PWA) Support： 支持渐进式网页应用程序
(4. Router：支持 v-router（路由管理器）；
(5. Vuex：支持 vuex（状态管理模式（构建一个中大型单页应用时））；
(6. CSS Pre-processors： css预处理（如：less、sass）
(7. Linter / Formatter ： 代码风格检查和格式化（如：ESlint）
(8. Unit Testing： 单元测试（unit tests）
(9. E2E Testing： E2E（End To End）即端对端测试
然后点击下一步；
配置页面
进入配置页面，对上一页所选的功能进行配置；
0.Choose Vue Version：
选择vue版本
router history模式：直观表现就是去除了hash模式中url路径中的#。
建议关闭
。
选择CSS预处理：node-sass是自动编译实时的，dart-sass需要保存后才会生效。
此处
建议选择 Sass/SCSS(with dart-sass)
选择 ESLint 代码校验规则。
此处建议选择默认配置，即直接回车即可。
选择什么时候进行代码校验，Lint on save 保存就检查。
此处建议选择第一个，即直接回车即可。
选择单元测试
Mocha + Chai： mocha灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
Jest： 安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect
等待创建
配置好后点击创建 创建项目，此时可以选择是否存入预设（是：取名保存，否：不记录本次配置）
然后等待创建（需要一段时间）
创建成功后，点击进入依赖面板中，
点击右上角安装依赖，搜索所需要的的依赖包，例如 搜索 ·axios，然后选中安装；
二、VSCode运行vue项目
好，至此vue项目创建完毕，接下来点开任务面板，在serve面板中启动项目。
或者在VSCode中
新建终端，然后运行
npm run serve
三、新建vue项目的目录结构
- 项目目录结构
vuecli-demo
|- dist // 打包后的目录，当执行打包命令后，自动生成该目录。
|- node_modules // 第三方依赖，我们安装的各种依赖都在这个目录里面
|- public // 存放公共资源的地方 比如 json 文件，里面有一个入口 html 页面
|-/src // 这个是重点，我们的源码以及开发的静态资源等都在里面
|- assets // 资源文件（字体，图标，图片）
|- components // 自定义的公共组件
|- router // 路由配置
|- store // 存放 vuex 状态管理
|- views // 存放页面
|- App.vue // 首页组件（默认组件）,也叫根组件
|- main.js // 项目执行的入口 js
|- babel.config.js // babel 配置文件
|- package.json // node 配置依赖文件
|- package-lock.json // 版本管理使用的文件
|- README.md // 项目的说明文档
- 创建一个新的HTML文件，并在文件中引入Vue.js。您可以从CDN上引入Vue.js，也可以直接从
node_modules文件夹中引入。以下是使用CDN的示例：
<!DOCTYPEhtml><html><head><title>Vue2 Demo</title><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script></head><body><divid="app"><!-- Vue应用程序的模板 --></div><scriptsrc="main.js"></script></body></html>
- 在项目文件夹中创建一个名为
main.js的JavaScript文件，这将是您Vue应用程序的入口文件。在main.js中，您可以创建Vue实例并编写Vue应用程序的逻辑。
// 导入Vueimport Vue from'vue';// 创建Vue实例newVue({el:'#app',data:{message:'Hello Vue!'}});
四、参考文献
过程中参考：
node’ 不是内部或外部命令，也不是可运行的程序 或批处理文件。
解决 windows11 文件夹中右键没有出现Git Bash Here的问题？
在 Vue 2 中安装
使用 vue ui 图形化界面创建vue项目
使用Vue ui （可视化）创建Vue项目
欢迎大家添加好友交流。
版权归原作者 是Yu欸 所有， 如有侵权，请联系我们删除。