如何运行单个.vue文件

最新推荐文章于 2024-03-09 21:52:37 发布
最新推荐文章于 2024-03-09 21:52:37 发布
阅读量5.7k 收藏 12
点赞数
分类专栏： vuejs 文章标签： javascript vue vue/cli-service
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013594477/article/details/121524618
版权

1、全局安装vue

cnpm install -g @vue/cli

2、查看vue版本

vue -V       //version--4.5.15

3、全局安装下面的扩展

cnpm install -g @vue/cli-service-global

4、在 .vue 文件所在的目录下运行

vue serve About.vue

发现报错，提示错误信息如下：
在这里插入图片描述
5、使用全局命令安装@vue/compiler-sfc

cnpm install -g @vue/compiler-sfc

接着运行vue serve …vue ，发现仍然报错，错误信息如下：
在这里插入图片描述
6、执行命令cnpm install --save vue,安装依赖，再次运行vue serve …vue,终于成功
在这里插入图片描述

lala_shine
关注
  • 0
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue3.0基础--单独运行vue文件
如需功能开发提供开发说明，请发送邮件至[email protected]
03-30 5940
1.在根目录建立一个vue文件 2.vue servevue文件名 3.出现以下情况： 执行：npm install -g @vue/cli-service-global 重启项目。
weapp-vue-parser:WeApp的单个Vue文件解析器
05-09
weapp-vue-parser weapp的单个vue文件解析器。 安装： npm install -S afeiship/weapp-vue-parser --registry=https://registry.npm.taobao.org 用法： const fs = require ( 'fs' ) ; const { resolve } = require ( 'path' ) ; const weappVueParser = require ( '../dist/index' ) . default ; const dist_dir = resolve ( __dirname , './card' ) ; const html = fs . readFileSync ( resolve ( __dirname , './card.vue' ) ) ; const re
Vue-单文件组件使用说明
weixin_39218464的博客
06-23 1706
.vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js vue-loader 浏览器本身并不认为.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loader 类似的loader还有许多，如：html-loader、css-loader、style-loader、babel-loader等 需要注意的是vue-loader是基于webpack的webpack是一个前端资源模板化加载器和打包工具
vue文件正常运行及vue中文件用处
最新发布
2301_76511503的博客
03-09 154
2.然后在vscode打开vue文件，在vscode打开终端，输入npm i(创建依赖，生成node_modules文件)，然后关闭vscode再重启。index.html入口文件，在项目最外层，它引入main.ts。vite.config.ts配置文件（安装插件，配置代理）vue3中是通过createApp函数创建一个应用实例。1.在终端下创建vue文件（推荐基于vite创建）花枝花朵放components文件中。package.json中的段命令。env.t.ts使文件互相认识。
【学Vue就跟玩一样】组件-单文件组件
zhaochen1127的博客
01-13 4603
单文件组件在实际开发中是经常使用的，那么如何创建一个单文件组件呢？那么本篇就来简单入一下单文件组件。
vuemodoro-Pomodoro计时器作为单个文件Vue组件。-Vue.js开发
05-27
vuemodoro SFC实现Pomodoro计时器的Vue组件Vuemodoro是实现倒数计时器的Vue单个文件组件，旨在提供vuemodoro SFC实现Pomodoro计时器的Vue组件Vuemodoro是实现倒计时计时器的Vue单个文件组件，旨在提供Pomodoro倒计时您的Vue应用程序。 它带有一组属性，使该组件可根据您的需求进行自定义。 例如，您可以自定义倒计时的持续时间或自定义按钮以与组件进行交互。 此外，您可以在不同样式之间进行选择，以选择Vuemodoro
单独运行Vue文件
wwf1225的博客
04-13 7051
场景：想单独运行某个Vue文件，不依赖src,类似运行单独的HTML文件 1.安装vue serve 2.运行 npm install -g @vue/cli-service-global 3.安装完成之后cd到需要单独运行的Vue目录下，执行 vue serve XXX ...
Vue的使用及运行
李桥桉的博客
06-13 7632
选中要运行的文件，右键-->【在集成终端中打开】，在终端输入npm run serve 后回车，开发运行，注意vue文件千万不要试图用open with live server打开，此法根本打不开
如何运行vue项目(超详细图解）
小熊的博客
02-06 6万+
📖本篇超级详细案例截图教学 如何运行别人的vue项目，图片点击可放大仔细看。 输入node -v查看nodejs版本 node -v 输入npm -v查看npm版本
webstorm中运行单个vue文件
小翠学姐的博客
06-24 2178
https://cli.vuejs.org/zh/guide/prototyping.html#vue-serve
nativescript-vue-rollup-template：准备与Vue.js和.vue文件一起滚动的NativeScript模板
02-04
已淘汰 我们不推荐使用此模板，而推荐使用。 有些事情可能已经改变，并且我有一段时间没有测试过该模板了。 使用Webpack模板查看以获取可运行应用程序的示例。 NativeScript Vue.js模板 此仓库使用作为NativeScript + Vue.js项目的起点。 该模板创建一个项目，准备与Vue单个文件组件*（. .vue文件）一起使用！ 它使用以下结构创建一个项目： my-app | |-app # your app code | |-components | |-... | |-tns # the generated tns project |
vue-browser-sfc:Vue CLI模板，用于从.vue文件创建独立组件以在浏览器中使用
05-02
Vue浏览器SFC 用于将单个文件组件（.vue）编译为独立JS文件以在浏览器中使用的构建设置的模板 该模板对于将VueJS单个文件组件（SFC）编译为独立的JS文件以在浏览器中使用非常有用。 这对于希望创建一个可以在网站上使用而无需围绕该网站构建整个应用程序的简单组件的开发人员很有用，类似于可以使用JQuery插件的方式。 模板，脚本和样式都被编译到单个JS文件中。 编译器设置为允许您根据需要使用LESS或SASS（scss或sass）。 用法 这是的项目模板。 1.创建一个新的Vue项目 在命令行中，在将要保存项目的父文件夹中输入以下命令。 # Install vue-cli if you haven't already $ npm install -g vue-cli # Create a new project based on this template $ vue ini
require-vuejs-RequireJS插件，用于异步和动态加载和解析.vue组件。-Vue.js开发
05-27
require-vuejs RequireJS插件，用于异步和动态加载并解析.vue单个文件组件。该库只有4Kb（最小化）。 这个天秤座require-vuejs RequireJS插件可以异步和动态加载和解析.vue单个文件组件的内容此库只有4Kb（最小）。 该库可以做什么实时集成不需要构建即可使用用作RequireJS插件您可以从IDE Suport对单个文件组件使用语法检测，无论是否带有扩展名，都支持.html和.vue文件支持.html和.vue文件组件文件中CSS库无法解析Jade和其他模板范围CSS CDN开发（
vue中的template标签
热门推荐
u013594477的专栏
06-22 13万+
1.template标签，HTML5提供的新标签，更加规范和语义化 ；可以把列表项放入template标签中，然后进行批量渲染 <template id="tem"> <div id="app"> <h1 id="title"&
vue3搭建项目的两种方式@vue/cli和vite
u013594477的专栏
04-02 3356
vue3搭建项目有两种方式：vite和@vue/cli 1、@vue/cli搭建方式 见文章：https://blog.csdn.net/qq_40015826/article/details/89249086 PS: 使用cli版本需要高于4.5.x //全局安装 npm install -g @vue/cli # OR yarn global add @vue/cli //全局卸载 npm uninstall -g vue-cli # OR yarn global remove vue-cli //升级
vue实例化template参数的介绍
u013594477的专栏
12-05 3108
经常发现这样的代码在一些实例中： new Vue({ el:"#app", data:{ message:"message1 hello!" }, components:{ App:{template:"<div>This is template!</div&
axios发送请求，全局处理异常
u013594477的专栏
05-30 2404
之前用ajax的时候，jquery中的ajax处理全局异常，通过设置ajaxSetup方法： $.ajaxSetup({ headers: {'Authorization': header}, //添加请求头 complete:function(xhr,data){ //执行完success或者error方法后均要执行这个complete函数，可以用来捕获...
单个vue.js文件转换为单个 html文件
06-13
将单个 Vue.js 文件转换为单个 HTML 文件需要经过编译和打包的过程，以下是一个简单的步骤： 1. 确保你已经安装了 Node.js 和 Vue CLI。 2. 在终端中进入 Vue.js 文件所在的目录。 3. 运行命令：`npm run build`，这将触发 Vue CLI 的构建命令。 4. 构建完成后，会在 `dist` 目录下生成一个 `index.html` 文件和一个 `js` 目录，其中包含了编译后的 JavaScript 文件。 5. 将 `index.html` 文件和 `js` 目录复制到你想要部署的位置，然后在 HTML 文件中引入 JavaScript 文件即可。 需要注意的是，编译后的 JavaScript 文件可能会比较大，可以使用代码分割、懒加载等技术来优化页面加载速度。另外，Vue.js 文件中的 CSS 样式也需要在 HTML 文件中引入，可以将其复制到单独的 CSS 文件中，然后在 HTML 中引入。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值