【前端环境3】已有代码配置vue环境 + 使用 vue ui 图形化界面创建vue项目 + vue项目目录结构

是Yu欸

已于 2024-11-29 15:26:30 修改

阅读量2.2k

点赞数 22

分类专栏：前端文章标签：前端 vue.js ui

于 2024-07-02 10:47:57 首次发布

本文链接：https://blog.csdn.net/wtyuong/article/details/139917509

版权

前端专栏收录该内容

14 篇文章

订阅专栏

【前端环境3】使用 vue ui 图形化界面创建vue项目 + vue项目目录结构

写在最前面
零、已有代码 - 配置Vue2环境
一、从零搭建 - 使用 vue ui 图形化界面创建vue项目
二、VSCode运行vue项目
三、新建vue项目的目录结构
四、参考文献

请添加图片描述

🌈你好呀！我是是Yu欸 🌌 2024每日百字篆刻时光，感谢你的陪伴与支持 ~ 🚀 欢迎一起踏上探险之旅，挖掘无限可能，共同成长！

写在最前面

分享25本经典「前端书籍」，点击链接即可保存。
链接：https://pan.quark.cn/s/a0f37c305fac
提取码：rJrx

使用 vue ui 图形化界面创建 vue 项目是一种方便的方式，可以直观地操作和查看项目的配置和依赖。

零、已有代码 - 配置Vue2环境

PS E:\ui\wishCode> npm run serve
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> wish-web@0.1.0 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的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Vue2 Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- Vue应用程序的模板 -->
  </div>
  <script src="main.js"></script>
</body>
</html>

在项目文件夹中创建一个名为main.js的JavaScript文件，这将是您Vue应用程序的入口文件。在main.js中，您可以创建Vue实例并编写Vue应用程序的逻辑。

// 导入Vue
import Vue from 'vue';

// 创建Vue实例
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

四、参考文献

过程中参考：
node’ 不是内部或外部命令，也不是可运行的程序或批处理文件。
解决 windows11 文件夹中右键没有出现Git Bash Here的问题？

在这里插入图片描述

在 Vue 2 中安装
 使用 vue ui 图形化界面创建vue项目
 使用Vue ui （可视化）创建Vue项目

欢迎大家点开下面名片，添加好友交流。

【前端环境3】已有代码配置vue环境 + 使用 vue ui 图形化界面创建vue项目 + vue项目目录结构

【前端环境3】使用 vue ui 图形化界面创建vue项目 + vue项目目录结构

写在最前面

零、已有代码 - 配置Vue2环境

一、从零搭建 - 使用 vue ui 图形化界面创建vue项目

vue ui，如果敲了回车不生效

继续， vue ui

创建vue项目

手动配置依赖项

配置页面

等待创建

二、VSCode运行vue项目

三、新建vue项目的目录结构

四、参考文献

`vue ui`，如果敲了回车不生效

继续， `vue ui`