vue文件正常运行及vue中文件用处

最新推荐文章于 2024-06-23 14:48:36 发布
最新推荐文章于 2024-06-23 14:48:36 发布
阅读量405 收藏 4
点赞数 10
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76511503/article/details/136590680
版权
本文介绍了如何在终端环境下使用Vite创建Vue3项目，包括在VSCode中设置、安装依赖、运行开发服务器，以及配置基本的项目结构和文件交互。重点讲解了`createApp`函数和组件管理，以及配置`vite.config.ts`来定制开发体验。
摘要由CSDN通过智能技术生成

1.在终端下创建vue文件（推荐基于vite创建）

2.然后在vscode打开vue文件，在vscode打开终端，输入npm i(创建依赖，生成node_modules文件)，然后关闭vscode再重启

3.然后输入npm run dev可以运行vue 

src主战场

createApp盆创建应用
App花根根组件
createApp(App)把花插在花盆里
mount('#app')把花盆放在家的哪个地方挂载在id为app的容器里（容器在index里）

vue3中是通过createApp函数创建一个应用实例

createApp(App).mount('#app')

花枝花朵放components文件中

env.t.ts使文件互相认识

index.html入口文件，在项目最外层，它引入main.ts

加载index.html后，Vite 解析 <script type="module" src="xxx"> 指向的JavaScript。

package.json中的段命令

vite.config.ts配置文件（安装插件，配置代理）

结构 交互 美化

templatehtml
scriptjs/ts
stylecss
留白05
关注
  • 10
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue常考面试题及答案
08-10
Vue 常考面试题及答案 Vue 优点： 轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb。 简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习。 双向数据绑定：保留了 angular 的...
Vue.js 3.0企业级管理后台源码（前端）
03-05
Vue.js 3.0 是一个重要的前端框架更新，它带来了许多性能优化和新特性，使得构建企业级管理后台更加高效和便捷。...同时，熟悉这些配置文件的用途和作用，对于提升前端项目的专业性和效率具有重要意义。
vue的.vue文件是怎么run起来的(vue-loader)
10-17
通过vue-loader，解析.vue文件，在webpack解析，拆解vue组件，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下
源码时代WEB前端干货分享|带你领略vue不一样的风情
ITsource
11-08 232
最近几年，WEB前端越来越火，也诞生了非常多功能强大的框架，vue便是最近炙手可热的一个框架，不仅简单快速上手快，而且功能非常丰富，能完成各种常用项目！ 但是，很多coder对vue的了解都是‘自动化’配置完毕的一个脚手架项目，其实vue项目也可以自定义非常多东西。@vue/cli3.x的脚手架项目初始化是没有vue项目配置文件的，因为官方想要让新手对vue的上授更加快速！所以隐藏了此文件。好处...
vue项目的运行
最新发布
RainbowTutu的博客
06-23 1360
npm有缓存时，常常出现安装依赖不成功的现象，且一旦出现这个问题，报错信息很完善，但根据报错信息一项一项去解决，却死活解决不了，还找不出原因。控制台输入下面命令清除npm缓存，npm有缓存时，常常出现安装依赖不成功的现象。package-lock.json记录了整个node_moudles文件夹的树状结构，还记录了模块的下载地址，但是它是基于项目作者的npm版本库生成的，若不删掉这个依赖文件，容易出现npm版本差异导致的报错。3、在启动的命令行窗口输入【npm run serve】，回车。
.vue文件使用方法
Soul_Forest的博客
08-11 888
在webpack中引入.vue文件 1.安装vue-loader和vue-template-compiler npm i vue-loader vue-template-compiler -D 2.修改webpack.config.js 定义常量： const VueLoaderPlugin = require('vue-loader/lib/plugin') 在plugins中加入 new VueLoaderPlugin() 加入匹配规则 {test:/\.vue$/, use: 'vue-load
.vue文件怎么使用_深入Vue - 源码目录及构建过程分析
weixin_39641236的博客
11-26 132
摘要： Vue 源码阅读第一步。原文：深入 vue - 源码目录及构建过程分析公众号：前端小苑Fundebug经授权转载，版权归原作者所有。本文主要梳理一下 vue 代码的目录，以及 vue 代码构建流程，旨在对 vue 源码整体有一个认知，有助于后续对源码的阅读。1. 目录结构上图是对 vue 的代码的所有目录进行的梳理，其中源码位于 src 目录下，下面对 src 下的目录进行介绍。compi...
运行第一个vue.js文件
dreamzuora的博客
12-27 1215
第一个vue.js var vm=new Vue({ el: '#app', data: { message: 'hello world!' } });
使用springboot和vue，并基于hadoop完成的文件管理系统
12-29
使用springboot和vue，并基于hadoop完成的文件管理系统 -------- 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心...
课设毕设基于SpringBoot+Vue的在线答疑系统文件 LW+PPT+源码可运行.zip
05-18
这是一个关于课程设计或毕业设计的项目，主要使用了SpringBoot和Vue.js技术栈来构建一个在线答疑系统。这个系统可能是为了模拟在线教育平台中的师生互动功能，允许学生提问，教师解答，提供便捷的信息交流环境。下面...
vue-cli脚手架-bulid下的配置文件
11-27
本文主要针对初学者，详细解释Vue CLI的`build`目录下配置文件的用途和工作原理。 ### Vue CLI安装与Webpack项目创建 1. **安装Node.js**: 在开始之前，确保已安装最新稳定版的Node.js。可以通过官方下载页面或...
.vue文件怎么使用_我在项目中是这样配置Vue的
weixin_39717121的博客
11-21 952
独在公司加夜班，行行代码心甚寒。不知功能何时完，杀了产品来祭天。在前面的文章中，我为大家带来了许多Vue 实战技巧，也得到了大家的许多好评，但中间还是存在着些许漏洞，在此向大家表示歉意。其实在前面那些技巧之外，我们还可以做的更多，让我们的开发流程更流畅，开发体验更好，项目性能更上一层楼，怎么做呢，我们一起来看看。阅读小编近期的热门Vue相关文章,感谢各位掘友和群友支持，每周一，不见不散实...
简单运行Vue文件
weixin_43343423的博客
12-19 2383
.vue文件 分为三个部分 其中。template 相当于Html 其他两个地方没有变化 style 后面可以加一个 scoped 属性 来防止不同的vue文件的样式混淆的问题 下面我们表演如何用webstrom 来运行一个简单的hello.vue文件 <template> <div class="hello"> Hello {{who}} ...
Vue的使用及运行
李桥桉的博客
06-13 1万+
选中要运行的文件，右键-->【在集成终端中打开】，在终端输入npm run serve 后回车，开发运行，注意vue文件千万不要试图用open with live server打开，此法根本打不开
如何运行Vue项目
热门推荐
weixin_51538341的博客
01-01 1万+
前端vue项目
如何运行vue项目
Owen的博客
02-25 1801
1、安装 node.js （默认安装即可） 2、win+r 输入 cmd  进入命令行模式，输入  node -v ，显示版本号，代表安装成功； 3、安装cnpm 由于npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有还需要npm的国内镜像---cnpm 在命令行中输入 npm install -g cnpm --registry=http://regis...
教程.Vue的常见用法
刘云儿的博客
05-09 109
篇幅较长，建议使用 导航 配合 ctrl+f 快速搜索所需内容 一、安装使用 通过npm，安装脚手架 npm install -g @vue/cli 进入ui界面 vue ui 二、基础语法 Vue2示例 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <div id="app"> {{msg}} </div> <script type="tex
.vue文件转换成.html
03-31
Vue.js是一个构建用户界面的渐进式框架，它的组件通常是以.vue文件的形式存在。而将.vue文件转换成.html文件并不是Vue.js的主要用途，因为.vue文件中包含了Vue组件的定义、样式和逻辑，转换成html文件会丢失很多信息，也无法直接运行。但是，如果你想将Vue组件嵌入到其他网页中，可以通过编译器将.vue文件转换成.js文件，再通过Webpack等工具打包成.js文件，最终在html文件中引用即可。 以下是将.vue文件转换成.js文件的方法： 1. 安装Vue的脚手架工具，命令如下： ``` npm install -g vue-cli ``` 2. 创建Vue项目，命令如下： ``` vue init webpack my-project ``` 其中，my-project是项目名称，可以自定义。 3. 进入项目目录，安装依赖，命令如下： ``` cd my-project npm install ``` 4. 创建.vue文件，例如HelloWorld.vue，内容如下： ```html <template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <style scoped> h1 { color: red; } </style> ``` 其中，template标签是模板部分，script标签是逻辑部分，style标签是样式部分。 5. 编译HelloWorld.vue文件，生成HelloWorld.js文件，命令如下： ``` npm run build ``` 6. 在网页中引用HelloWorld.js文件，例如： ```html <!DOCTYPE html> <html> <head> <title>Hello World</title> <script src="dist/build.js"></script> </head> <body> <div id="app"></div> <script> new Vue({ el: '#app', render: h => h(HelloWorld) }) </script> </body> </html> ``` 其中，dist/build.js是Webpack打包生成的文件，HelloWorld是Vue组件的名称，可以在script标签中import引入。最终，打开网页即可看到Hello World的效果。 需要注意的是，以上仅是将.vue文件转换成.js文件的简单示例，实际应用中还需要考虑代码分割、异步加载等问题，具体可以参考Vue的官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值