vue2创建项目流程+删除不必要的项目文件

已于 2023-05-13 12:01:57 修改
阅读量1.2k 收藏 10
点赞数 1
文章标签： vue.js 前端 javascript
于 2023-05-13 12:00:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45711931/article/details/130655516
版权

创建项目

1.控制台进入到你想要创建的文件夹路径下创建：

vue create vision

2.手动选择特性

 3.选择Router , Vuex , CSS Pre-processors

 4.选择2.x

 5.是否选择历史模式的路由

6.选择less为css的预处理器

 7.选择eslint配置

8. 选择lint提示的时间

 9.存放babel,eslint的位置

 10.是否保存以上配置便利下次创建项目使用

11. 创建成功截图

 删除项目不必要的文件

将项目添加到工作区

打开App.vue文件删除红圈部分

 删除views文件夹下的AboutView.vue和HomeView.vue文件

删除components文件夹下的HelloWorld.vue文件

打开router文件夹下的index.js文件删除红圈部分的内容

 控制台进入项目目录执行npm run serve启动项目，浏览器打开项目为空白不报错即可。

关闭eslint检测​​​​​​​

洛千瑶吖
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目创建成功后 界面清理
Tsailing666的博客
11-20 1774
vue项目创建成功后 界面清理
脚手架必看
qq_50613817的博客
03-11 172
脚手架 安装： npm install -g @vue/cli 创建一个项目 创建一个新的文件夹(code)，shift 鼠标右键打开PowerShell窗口 运行命令：vue create hello-world 选择： 选择： 选择： 输入：n 选择： 输入：n 安装完成： 在code文件夹中就创建了hello-world文件夹 启动hello-world: npm rum serve 出现 说明此文件运行到了这两个地址上，一个是本地地址，一个人
vue项目性能优化：去除没有引用的文件
每天都要努力学习哦~~
09-06 990
随着项目开发的进行会经历一个混乱到整齐划一的过程，这个过程中会产生一系列冗余代码，这时候通过useless-files-webpack-plugin这个插件，可以帮助我们删除项目中无用的文件；
vue项目性能优化：去除无用的文件
浩星
11-03 7258
前言： 这里来分享一些vue项目性能优化的一些实用的方法，这里使用 useless-files-webpack-plugin 来查找无用文件。 实现步骤： 1、安装插件 npm i useless-files-webpack-plugin -S 2、vue.config.js中配置 const UselessFile = require('useless-files-webpack-plugin') chainWebpack: config => { ...
如何快速删除vue项目node_modules文件夹及项目中没有用到的插件
mewmew1的博客
02-25 7823
快速删除node_modules文件夹 1.在项目根目录下执行： 安装插件： npm i rimraf -g 删除文件夹： rimraf node_modules 即可删除。 删除无用插件 1.安装插件： npm i -g depcheck 2.项目文件里 package .json同级下运行命令查看插件： depcheck 结果如下： Unused dependencies ajv echarts-liquidfill element-theme express requset style-l
快速删除vue项目依赖node_modules文件夹
Achong999的博客
10-01 3697
快速删除vue项目依赖node_modules文件夹
20.(前端)vue-cli清理项目结构
m0_63953077的博客
10-13 733
由于，在新创建好的vue-cli中，很多显示是我们开发中不需要的，我们应该先把他删除
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
10-14
在Vue项目中，通常会将`node_modules`、`build`或`dist`等开发过程中产生的临时文件或者大体积文件添加到`.gitignore`，以免增加不必要的存储负担和避免混淆源代码与构建产物。 以下是一些常见的`.gitignore`文件中...
基于springboot+vue实现的在线考试系统+源代码+文档
05-09
- **虚拟DOM**：Vue.js使用虚拟DOM，提高了性能，减少了不必要的DOM操作。 3. **Element-UI**： - **组件库**：Element-UI是基于Vue.js的UI组件库，提供了丰富的界面元素，如表格、按钮、对话框等，使得前端界面...
vue 项目地址去掉 #的方法
10-17
vue 项目往往会搭配 vue-router 官方路由管理器，它和 vue.js 的核心深度集成，让构建单页面应用变得易如反掌。这篇文章主要介绍了vue 项目地址去掉 #的方法,需要的朋友可以参考下
详解如何从零开始搭建Express+Vue开发环境
10-18
将Express生成的代码移动到`/src/server`目录下，并删除不必要的文件，例如`routes`中的内容可以简化为一个`routers.js`文件，用于处理API路由。 3. **配置Babel和Vue**： 添加`.babelrc`配置文件，设置Babel转换...
vue2.0web商城带代码
03-11
- **虚拟DOM**: Vue 2.0使用虚拟DOM来高效地更新UI，减少不必要的DOM操作。 - **响应式系统**: Vue的数据绑定基于依赖追踪，当数据变化时自动更新视图。 - **组件化**: Vue的核心特性之一，通过组件构建复杂的UI...
vue-webpack：基于webpack的vue初始项目，具有出色的性能优化
02-08
1. **缩小和压缩代码**：使用`UglifyJS`或`Terser`插件去除不必要的代码和注释，以及使用`MiniCssExtractPlugin`来提取CSS到单独的文件并进行压缩。 2. **Tree Shaking**：Webpack 的Tree Shaking特性可以删除未...
vue-cli前端项目清理打包文件
移动开发学习笔记
06-12 3130
const fs = require('fs') const path = require('path') //1.删除旧是目录；2.创建新目录。 function deleteFolder(path) { let files = [] if (fs.existsSync(path)) { files = fs.readdirSync(path)//同步版的 fs.exists，检测给定的路径是否存在。 files.forEach(file => { let cu
Vue前端项目-清理创建项目中没用的信息
踏 浪的博客
03-07 3000
此教程适用于 使用 vue-cli 创建完项目后, 生成的一些没有用的信息. 1、App.vue 文件, 清理过后的文件内容 <template> <div id="app"> </div> </template> <script> export default { name: 'app' } </script...
用 Depcheck 去除vue 项目没有用到的依赖
zhuzhoulin的博客
03-15 6394
前言 目前开源项目刚准备上线，发现很多依赖未使用，但是在 package.json 中有定义，因此需要清理一下。这里记录一下排查过程 安装 Depcheck PS E:\work\iedaworkspace\project\web\bpm-web> npm install depcheck -g C:\Program Files\nodejs\node_global\depcheck -> C:\Program Files\nodejs\node_global\node_modules\d
性能优化 ：删除项目中没有引用关系的文件 useless-files-webpack-plugin
晴天有点孤单
06-30 1442
一般此类包不需要安装到项目中，减少node_modules体积（以项目实际情况决定-S/-D）最后执行npm run build 会自动生成文件unused-files.json。然后再vue.config.js中配置。默认clean为true会自动删除文件。
（三）Vue入门：工程清理
nothingi的专栏
07-18 386
一、下载Visual Studio Code 本文使用的版本是VSCodeSetup-x64-1.47.1.exe 安装完毕之后，可能会存在黑屏。使用兼容性打开，就会正常了。
Vue前端打包
最新发布
weixin_63680330的博客
07-04 347
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
vue2创建项目和vue3创建项目page.json区别
06-19
Vue 2 和 Vue 3 在创建项目时，`page.json`（或称为`pages`配置文件）的主要区别在于它们的架构和配置方式。下面是两者的简要介绍： **Vue 2（基于 Vue CLI 2.x）**： - 在Vue 2项目中，使用Vue CLI 2.x创建项目时，通常会有`src`目录结构，其中`pages`文件夹用于存放单页应用的组件。每个页面对应的组件会有一个独立的`page.json`文件，用来配置路由信息、meta标签等。`page.json`内容包含路径（path）、组件（component）、meta等属性。 - `page.json`的结构比较简单，主要是针对单个页面的配置。 **Vue 3（基于 Vue CLI 3.x+ 或者 Vue 3 Composition API）**： - Vue 3引入了更现代化的配置系统，Vue CLI 3.x及更高版本不再推荐使用`page.json`，而是使用`router`配置来管理路由和页面。在`src/router`目录下，通常会看到`.js`或`.ts`文件，如`main.js`或`index.ts`，这些文件会配置`vue-router`。 - `page.json`被`router`中的`routes`数组替代，定义了动态路由以及子路由。同时，路由配置中可以使用`meta`字段来为特定路由设置元数据，这与Vue 2中的`page.json`功能类似。 - 使用Composition API（如`setup()`函数）的项目，可能会有更多的模块化配置，`page.json`的使用相对较少。 **相关问题--:** 1. Vue 3中，路由配置是如何组织的？ 2. Vue CLI 3如何处理页面配置和路由映射？ 3. 在Vue 3中，`page.json`是否完全被淘汰，还是有所保留？

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值