用HBuilder学习vue

最新推荐文章于 2024-06-28 17:04:21 发布

日落西山+

最新推荐文章于 2024-06-28 17:04:21 发布

阅读量856

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43769531/article/details/111573562

版权

1. 下载vue.js

官网：https://cn.vuejs.org/v2/guide/installation.html
在这里插入图片描述

2. 在HBuilder中创建项目

文件/新建/项目
在这里插入图片描述

3. 引入vue.js

将第一步下载的vue.js粘贴到js目录下：
在这里插入图片描述
在需要的html文件中应用vue.js即可：

<script src="js/vue.js"></script>

在这里插入图片描述

4. 编写第一个vue代码

参考vue官网：https://cn.vuejs.org/v2/guide/
在这里插入图片描述
在HBuilder编写

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

日落西山+

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
用HBuilder学习vue

下载vue.js官网：https://cn.vuejs.org/v2/guide/installation.html
复制链接

扫一扫

HBuilderX使用html引用Vue入门

weixin_45128867的博客

07-03

4513

前言，历经苦难终于来到了Vue.js，来到大名鼎鼎的前端框架怎么能，不好好学习呢，加油吧下载:HBuilderX编程工具官方下载，建议下载12版比较稳定. 好了之后，去下一个node.js. 安装步骤，一直点下一步就行了，然后在cmd以管理员身份运行，输入node -V 有版本号就是正常安装. 安装好了. 回到正题使用Hbuilderx使用html引用vue 勾选第二个使用html引用vue，这样就创建了一个可以使用vue的html项目，奈何是新手 ┭┮﹏┭┮ ，简单容易理解. 编写第一个

怎么用hbuilder跑vue项目_听说vue项目不用build也能用?

weixin_42131790的博客

01-26

1224

。组件代码的结构如下:const template = ` ... `export default { template, data () { }, computed: { }, // etc.}主要的应用程序组件在 index.js 文件中。它的任务是为所有组件分配定制的 HTML 标记，比如 < app-header > 或 < ...

参与评论您还未登录，请先登录后发表或查看评论

使用HbuilderX快速搭建vue-cil项目

最新发布

2301_77681226的博客

06-28

1861

App.vue文件。

hBuilder搭载vue项目

weixin_47074036的博客

11-16

1689

hBuilder搭载vue项目一、先在软件管家下载hBuiler二、然后创建一个vue项目![在这里插入图片描述](https://img-blog.csdnimg.cn/445c785038504589ba36480cc2a00a62.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2VpeGluXzQ3MDc0MDM2,size_19,color_FFFFFF,t_70,g_se

vue教程

麦田里的守望者

01-09

942

原文 1 vue安装 1.1 直接用 script标签引入对于制作原型或学习，你可以这样使用最新版本： <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏： <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

使用HbuilderX学习Vue笔记

qq_42266891的博客

10-25

2073

使用HbuilderX学习Vue 从各种视频和书中结合学习。做个笔记温故知新。 html中的页面结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title>  <scri...

HBuilder启动vue项目

m0_67401382的博客

08-01

5597

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。想着第二天来继续看看，结果，第二天，直接npmrundev就好用了！第一次，启动项目（git下载），现在进行到，代码下载完，用HBuilder打开，一定不要下载最近版本！百度也没看出来什么，本来想着下班前弄好环境，结果，到这了，关机，回家。这个状态是刚刚开始，不要关！...

HBuilder配置vue编译环境

weixin_44433499的博客

04-13

5837

Hbuider下载地址：http://www.dcloud.io/hbuilderx.html （1）创建vue项目，npm run build 在HBuilder中安装了内置终端插件：安装完成打开 Readme. md（这里写有常用命令），执行第二步npm run dev。，在根目录下会创建一个dist文件夹，里面内容就是编译完成后的资源。 ...

使用HBuilderX创建Vue 2 + ElementUI 项目的简易指南

m0_51225410的博客

07-03

1690

在本文中，我们将介绍如何使用HBuilderX来创建一个基于Vue 2和ElementUI的项目。HBuilderX是一款强大的开发工具，可用于快速搭建和开发Vue项目。ElementUI是一套基于Vue.js 2.0的桌面端组件库，拥有丰富的UI组件和交互效果。

在HBuilder中怎么创建Vue项目

AprRain的博客

12-22

2173

使用HBuilder创建Element-UI项目的完整步骤。

零基础前端Vue的小白学习路——（Node.js,VSCODE,Hbuilder X）环境搭建

qq_36215279的博客

07-05

1473

主要特点：事件驱动的、非阻塞式I/O的环境，适合在分布式设备上运行数据密集型的实时应用。俗话说，实践是检验真理的唯一标准，IT的学习更是离不开实践。搭建环境想必是许多IT人刚入门一个新语言的第一个门槛，不正确的配置、不适配的版本往往会让你未来的道路变得不平坦，因此搭建环境时需要尤为谨慎。在环境变量对话框里，找到系统变量下的Path -->编辑 -->新建 -->将node.js的安装目录复制上去，点击确定即可。更改npm的本地仓库以及配置npm的下载镜像站（可以更快速的实现npm对扩展模块的下载）。

Vue初始化在HBuilderx中快速搭建

一位努力想成为 Java全栈工程师云南小伙子

05-10

3179

HBuilderx快速新建VUE项目一、安装HBuilderx开发工具官网：HBuilderx HBuilderXH是HTML的第一个字母，Builder是builder，X是HBuilder的下一个版本。我们也被称为HX。 HBuilderX是轻量级但功能强大的 IDE。它的官网上介绍到HBuilderx为极客、为懒人、为我们前端开发人员提供了代码提示性非常强的一款编辑器安装步骤： 1.点击下载安装开发工具HBuilderx，这里选择自己电脑系统的压缩包就行 2.完成后，直接解压到自己

使用HBuilderX编写第一个Vue项目之js

includeCSDN的博客

04-28

2万+

HBuilderX使用流程首先建好文件目录后我的文件结构如下：使用HBuilderX自带终端命令窗口导入jQuery 1.npm init -y 初始化 2.npm i jquery -S 导入jquery 导入后直接引用js文件浏览器会报错：undefined token import 需要使用webpack命令进行编译方法有两种：（1）webpack 要打包文件 -o 输出路径...

使用基于Vue.js和Hbuilder的混合模式移动开发打造属于自己的移动App

刘悦的技术博客

06-14

1万+

说白了，如果走传统移动开发路线，公司业务覆盖多端，那么每个平台势必要请一个专属开发人员，安卓要请一个前端开发，ios同理，那么人力成本则进行了翻倍，同时，如果多端使用不同的代码，当有功能上的修改或者维护时，成本也是不可想象的。此时，发现样式已经生效了，但是我们想让首页使用瀑布式的布局，也就是快手和抖音常用的那种首屏流动式布局，所以需要安装vue-masonry，这个vue.js组件可以很方便的将布局改造成瀑布式的。vue.js将会包项目直接打包在dist文件夹中，这时，下载hbuilder安装包。

Vue教程03-Vue脚手架开发环境

watchping的博客

02-12

2010

Vue脚手架开发环境

如何用HbuilderX开发vue项目?

热门推荐

qq_41512822的博客

12-30

4万+

一、安装node 1、下载地址为：https://nodejs.org/en/ 2、一路点击Next，检查是否安装成功　3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/ 输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm...

html引入Vue.js的方式（在HbuilderX或Hbuilder中）

;

01-31

9759

一、创建项目时引入 1.新建vue项目 2.添加代码 <body> <div id="app">{{aaa}}</div> </body> <script> new Vue({ el:'#app', data:{ aaa:'Hello Vue.js !' } }) </script> 二、在官网下载...

linux重启mysql

m0_67402236的博客

07-30

2万+

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。1、直接使用“servicemysqldrestart”或“servicemysqlrestart”命令重启；方法一status;...

使用hbuilderx运行vue

03-07

HBuilderX是一款由DCloud开发的集成开发环境（IDE），专门用于前端开发。它支持多种前端框架，包括Vue.js。下面是使用HBuilderX运行Vue项目的步骤： 1. 安装Node.js：首先，确保你已经安装了Node.js。你可以在Node.js官网上下载并安装最新版本。 2. 安装Vue CLI：打开命令行终端，运行以下命令来全局安装Vue CLI： ``` npm install -g @vue/cli ``` 3. 创建Vue项目：在命令行终端中，进入你想要创建项目的目录，并运行以下命令来创建一个新的Vue项目： ``` vue create my-vue-project ``` 在创建过程中，你可以选择使用默认配置或手动选择所需的特性。 4. 运行项目：进入项目目录，运行以下命令来启动开发服务器： ``` cd my-vue-project npm run serve ``` 这将启动一个本地开发服务器，并在浏览器中打开你的Vue应用程序。至于HBuilderX的具体使用方法，你可以参考官方文档或在线教程来学习更多。希望对你有所帮助！