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

是Yu欸 2024-09-11 10:03:02 阅读 52

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

写在最前面零、已有代码 - 配置Vue2环境一、从零搭建 - 使用 vue ui 图形化界面创建vue项目`vue ui`，如果敲了回车不生效继续， `vue ui`创建vue项目手动配置依赖项配置页面等待创建

二、VSCode运行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环境

<code>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环境，如<code>nvm use 12.18.0 //使用特定版本

确保计算机上已安装Node.js。可以在终端或命令提示符中运行node -v命令来检查是否已安装Node.js。如果未安装，请参考：【前端环境1】安装nvm

输入npm - v命令来验证 Node.js 和 npm 是否正确安装。

在这里插入图片描述

安装Vue2：

先检查是否已经安装<code>vue --version，如果：@vue/cli 5.0.8，则已安装，跳过后面这一步。如果未安装：

npm install -g @vue/cli

这将安装Vue.js的最新版本。

在这里插入图片描述

（不需要）在项目文件夹中，运行<code>npm init -y命令来初始化一个新的npm项目：

在这里插入图片描述

这将创建一个新的<code>package.json文件，其中包含您项目的配置信息。

在项目文件夹中打开终端或命令提示符窗口，然后输入 npm install 并按回车键即可开始安装项目依赖。

在终端或命令提示符中运行以下命令来启动开发服务器：

npm run serve

这将启动一个开发服务器，并在浏览器中打开您的HTML文件。

现在，您已经成功配置了Vue2环境，并且可以开始开发Vue应用程序了。

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

打开一个要创建项目的文件夹，选中文件路径然后输入‘cmd’，回车，打开命令行界面

然后直接输入命令 vue ui ,等待加载。

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

在这里插入图片描述

不要着急

先<code>Vue -h检查一下

在这里插入图片描述

此时Commands中少了一个ui的相关信息

在控制面板中运行一下两行命令：

<code> //卸载老版本

npm uninstall vue-cli

//安装新版本

npm install -g @vue/cli

操作完成以后再一次的vue -h检查一下，此时你会发现Commands中多了一个ui的相关信息

在这里插入图片描述

继续， <code>vue ui

成功后会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程；

在这里插入图片描述

创建vue项目

选择创建，在此可再选择项目所在目录，然后在下方选择在此创建新项目；

然后进入详情页，给项目命名、选择包管理器。这里选择 npm，接着点下一步；

手动配置依赖项

进入预设页面，选择手动，便可以手动选择安装哪些依赖项，或使用其他已经预设好的依赖项组合。这里选择 <code>手动，然后点下一步；

进入功能页面，选择开发需要的功能。

（这里我选择的是：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：<code>选择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项目的目录结构

项目目录结构

<code>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>code>

</head>

<body>

<div id="app">code>

</div>

<script src="main.js"></script>code>

</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项目
 
 欢迎大家添加好友交流。

 
 
   上一篇： 什么是WBS？如何创建WBS工作分解结构？ 
  下一篇： systemverilog绿皮书随记（一）--数据类型 
  本文标签 
  【前端环境3】已有代码配置vue环境 + 使用 vue ui 图形化界面创建vue项目 + vue项目目录结构    
 
  
  声明
  本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
 如有涉及侵权，请联系本站进行删除
 转载本站原创文章，请注明来源及作者。