VUE CLI 项目构建初始化文件预览

最新推荐文章于 2023-04-19 22:20:48 发布
最新推荐文章于 2023-04-19 22:20:48 发布
阅读量280 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： vue-cli 文章标签： VUE CLI 项目构建初始化文件预览
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_35737292/article/details/84860918
本文介绍了前端项目的典型结构，包括index.html作为页面入口，main.js作为JS入口文件，index.js作为路由入口，以及App.vue作为根组件。此外，还提到了components文件夹中HelloWorld.vue的默认存在及其可删除性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、index.html 页面入口

2、main.js ：js入口文件

3、index.js 路由文件，路由入口

4、App.vue 根组件，组件入口

 

5、通过以上设置，components 文件中自带的 HelloWorld.vue 文件可以直接删除掉

Vuecli命令创建项目并预览
Xu_Lisa的博客
07-02 238
创建项目 vue create 项目名 一般控制上下键选择第一个就足够了，选择它给你预设好的基于Vue2.x版本的配置即可。 第二个预设则是基于Vue3的，如果没有接触过Vue3的就不必选择了 第三个manually则是自定义配置(如代码规范，打包配置等) 选择完后，命令会自动创建项目及其配置，此时只需等待即可。 配置完毕后，输入以下命令即可运行 cd 你的项目文件夹名称 npm run serve ...
vue-cli本地预览打包文件
GreyCastle的博客
06-02 752
vue预览本地打包文件
Vue cli 打包完预览
pigpigbond的博客
04-12 1408
Vue cli 打包完预览 在我们项目完成的时候，我们需要预览下打包完成的项目 在Vue cli 官方文档中有解决方案 dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 publicPath 配置为了一个相对的值)， 所以 以 file:// 协议直接打开 dist/index.html 是不会工作的。 在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器， 例如 serve： 安装serve npm install -g serve 使用 # -s 参数的意
Vue-cli配置打包文件本地预览
ccxh505398633的博客
08-01 4197
Vue-cli配置打包文件本地使用 最近做的一个嵌入app的pc端项目，用的也是比较熟悉的vue-cli构建工具构建项目,需要的是打开dist文件夹入口html能加载到本地的静态文件，打包后的index.html加载文件如图： url中的路径据我们所知，最前面为一个反斜杠（/XX），表示从网站根目录开始搜索文件，如果需要相对当前文件夹则需以 ./或者不加反斜杠为路径开头，看来是打包后的...
vue单组件通过命令行运行预览
追梦&天空的博客
04-19 2103
有时候在想写一个基于Vue的简单的 demo 的时候，需要先搭建一套可以使用的vue项目。步骤说不上繁琐，但是要么项目比较体积比较大，要么需要安装一大堆依赖插件才能预览 vue 组件的效果。今天介绍一个比较方便的 vue 单组件预览，不需要什么配置，命令行直接执行这个vue单组件即可预览vue单组件的样式基本功能。在介绍vue单组件预览之前，先了解一下以往的vue组件查看效果的几种方式。安装 @vue/cli 脚手架。安装 本地服务 插件。安装 本地服务 插件。
Vue cli构建及项目打包以及出现的问题解决
10-18
总而言之，Vue-cli项目构建流程大体包括安装Node.js和Vue-cli、初始化项目、安装依赖、启动项目和打包项目这几个步骤。在每个环节中，可能都会遇到一些细节问题。掌握这些基础知识，可以帮助我们更好地利用Vue-cli...
使用 Vue cli 3.0 构建自定义组件库的方法
10-17
它提供了开箱即用的脚手架，简化了项目的初始化和构建流程。这篇文章将介绍如何使用 Vue CLI 3.0 构建自定义的组件库，帮助开发者创建自己的 UI 库。 首先，确保已经安装了 @vue/cli 3.0。如果没有，可以通过运行 `...
vue-cli 构建骨架屏的方法示例
10-17
它提供了便捷的脚手架功能，能够自动生成项目结构，包括配置文件、基础目录等，极大地简化了项目的初始化工作。构建骨架屏（Skeleton Screen）是提高用户体验的一种方法，尤其是在页面数据加载时显示一个模拟布局的...
邮件模板html
01-14
邮件模板html格式 html电子邮件模板代码 适用于web开发
基于 vue-cli 的前端项目的自动发布预览环境
weixin_33816611的博客
01-08 379
场景 进入公司一段时间了。流程还是不太让人省心。就在上个提测版本的质量还是没法保证，总是或多或少出现一些问题。于是就想到了上家公司的一个做法。就是在提测前部署一个预览环境，在提测前，每个人本地验证一遍，再放在预览环境验证一遍。 实施 有了想法，就得去付诸行动。先是用公司的一个测试服务器单独起了一个服务，用nginx来做反向代理。然后把前端...
vue-cli 初始化一个项目后里面的文件的一些说明！
Mr_pets的博客
09-17 297
vue-cli 初始化一个项目后里面的文件的一些说明！ 写在前面：废话不多说，直接上图，这里是vscode的截图 一级目录下的文件说明： 文件夹或文件名 作用说明 build文件夹 这里是webpack相关的一些配置 config文件夹 生产环境和开发环境的一些配置参数 node_modules文件夹 安装的第三方的依赖 src文件夹 写项目的源码 stati...
前端学习----vue及其.vue文件的一些知识点及使用递归组件完成树形结构
qq_39205157的博客
06-04 470
前端学习----使用vue递归组件完成树形结构1.初步认知1.1MVVM和MVC1.2VUE的一些知识点递归组件展开效果 1.初步认知 近期整理以前杂乱的代码，发现有些还有点乱，就开始梳理并尝试用Vue来代替以前纯js和css制作导航栏之类树形结构，顺便梳理一下Vue的知识 1.1MVVM和MVC 首先讲一下相关的两个模式， 一是MVVM相信很多旁友都有听过，简言之就是M（Model 模型层）可以理解为一堆数据，V（view视图层）也就是我们直观即毫无关键数据的界面，VM（ViewModel 逻辑层）即解
vue-cli3 本地预览打包代码
潇蓝诺依的博客
08-14 1438
本地预览打包代码 serve dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 publicPath 配置为了一个相对的值)，所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器 npm install -g serve # -s 参数的意思是将其架设在 Single...
vue-cli 构建的项目，本地手机端预览
泥猴桃的博客
12-21 523
前提： 手机和电脑在同一wifi下 一：打开项目的package.json文件，修改里面的script里面的dev 在dev 键值最后边加上 --host 192.168.199.196 192.168.199.196 就是自己的本地ip地址 windows 查看ip 地址 打开终端，或者git bash 输入 ipconfig 里边的ipv4 就是自己的本地ip mac 查看ip ，也是打...
react v16 create-react-app+sass
CloudJay的博客
04-28 1551
在创建工程项目后,由于没有传统的webpack.config文件首先安装eject生成自定义配置文件(注意,用eject生成webpack.config后该操作不能回滚,注意备份)npm i eject npm run eject之后会发现项目根目录下多了很多文件,比如/config,/scripts文件夹我们先安装编译sass的loadernpm install sass-loader node...
vue 在线预览、下载word、pdf文件
热门推荐
qq_35867802的博客
07-31 4万+
vue 在线预览、下载word、pdf文件 最近项目用vue-cli3要实现word和pdf文档的在线预览和下载，在网上看到各位大佬们各种办法，发现踩坑无数，还是没弄出来，最后发现还是是自己想复杂了 PDF预览下载 在网上看到有大多数人都在用vue-pdf实现预览，我也试用了一下，发现官方例子点简单，网上各种大佬的帖子也很多了，所以就不重复了。 这个还是用最原始的才是最简单的，A标签直接下载预览，...
【Vue + ElementUI】 实现树形结构的单选操作
猾枭的博客
09-12 1万+
实现后的效果图： 没有做gif图片，下次有时间做一下，替换过来吧，效果就是只能单选，而且只能选择最底端的叶子节点。 代码部分： 1）show-checkbox即可以打开树结构前面的框框，elementUI没有直接指定的单选操作，但是可以通过写方法实现 2）:filter-node-method="filterNo...
Vue-cli 2.9.3 安装与项目初始化教程
- 通常推荐使用 `webpack` 模板，例如创建一个名为 `vuecli_demo` 的项目，运行 `vue init webpack vuecli_demo`。在初始化过程中，系统会提示你输入项目名称、描述（默认为 AVue.js project）、作者等信息。 3. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值