首页 > 其他分享 >超详细!新手如何创建一个Vue项目

超详细!新手如何创建一个Vue项目

时间:2023-04-04 18:56:31浏览次数:47  
标签:Vue 浏览器 创建 js vue Vue2 引入 新手

目录

本篇仅以HBuilder X为例,其余开发软件同样适用
这里两种方法,使用<script>标签直接引入本地的vue.js或使用CDN引入。

一、在官网下载Vue.js


详见官方文档
Vue2
Vue3

二、使用<script>标签直接引入本地的vue.js


首先点击新建一个项目

填写项目名称与路径,初学者建议选择普通Vue项目就好(本篇主要讲解普通Vue项目),点击创建

不要在意body里面的内容,HBuilder X默认引入的是Vue3,而大多数初学者是从Vue2开始学习的

HBuilder X在创建项目时将Vue.js文件放在了如图的位置

Vue是一款追求轻量化的框架,官方推出了Vue.js和Vue.min.js两个版本,Vue.js是开发环境版本,包含完整的警告和调试模式,而Vue.min.js是面向用户的生产环境版本,为了轻量化的目的删除了所有警告,可以理解为是mini版的Vue.js,我们在开发时选择Vue.js版本
只需要将上面的<script>标签中的路径更改即可

<script src="./js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>

三、使用CDN引入Vue.js


将以下内容复制到head即可
Vue2

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Vue3

<script src="https://unpkg.com/vue@next"></script>

四、验证是否安装成功


直接运行此项目,打开浏览器的控制台,输入 Vue 点击回车,弹出构造方法即为成功(注:Vue2与Vue3的构造方法不同)

第一次运行控制台会给我们两条信息

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
这是Vue提示我们安装浏览器调试插件,安装方式在下文给出

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
这是Vue提示我们正在开发模式下运行Vue。部署生产时,请确保打开生产模式。

五、安装Vue Devtools浏览器调试插件


Chrome浏览器和edge浏览器均可直接在扩展商店中搜索下载
也可以去GitHub上下载(点我)

不同浏览器导入方法

edge:


Chrome:

标签:Vue,浏览器,创建,js,vue,Vue2,引入,新手
From: https://www.cnblogs.com/mieriki/p/17287001.html

相关文章

  • virtualenv、virtualenvwrapper创建虚拟环境与使用原理
    摘要:virtualenv和virtualenvwrapper是创建和管理python虚拟环境的工具包,virtualenvwrapper是virtualenv的封装与扩展而来,方便创建、删除、切换虚拟环境 一、原理macos~/.bash_profile添加系统环境变量:exportWORKON_HOME=~/.virtualenvsexportVIRTUALENVWRAPPER_PYTHON=......
  • 如何在vue3获取 DOM 元素
    获取dom的ref元素名称,要对应暴露的名称,不然会出现无效的dom报错,也就是拿到的是null在setup中,使用ref(null)获取dom不能直接在setup里面拿到dom的值,因为setup对应的生命周期是created,所以必须在后续的生命周期钩子里面拿到,比如onMounted注意:ref不要加冒号,直接写dom元素名称......
  • vue引入粒子背景图效果
    安装依赖npminstallvue-particles--save-devmain.jsimportVueParticlesfrom'vue-particles'Vue.use(VueParticles)template  <vue-particles     color="#409EFF"     :particleOpacity="0.7"     :parti......
  • Vue3——使用deep进行样式穿透的时候发出v-deep警告
    前言其实只是一个警告,如果你不在意也是可以的,不过有点强迫症就按着提示说的改了,然后又去官网看了下对应的文档;!>::v-deepusageasacombinatorhasbeendeprecated.Use:deep()instead.这里没啥好说的,因为Vue3的文档中有对应的解释组件作用域CSS了,而且就算不看文档根据提......
  • DayOne-Vue的基本使用指令以及过滤器
    一、Vue1、什么是VueVue是一个流行的JavaScript框架,用于构建用户界面。它被设计成渐进式的,可以逐步应用到现有的项目中,也可以构建全新的应用。Vue的核心库只关注视图层,因此易于集成到其他库或现有项目中。Vue具有响应式和组件化的特性,使得开发者可以更轻松地管理和维护复杂的用......
  • flutter系列之:创建一个内嵌的navigation
    目录简介搭建主Navigator构建子路由总结简介我们在flutter中可以使用Navigator.push或者Navigator.pushNamed方法来向Navigator中添加不同的页面,从而达到页面调整的目的。一般情况下这样已经足够了,但是有时候我们有多个Navigator的情况下,上面的使用方式就不够用了。比如我们有一个......
  • 使用jenkins一键打包发布vue项目
    jenkins的安装Jenkins是一款开源CI&CD软件,用于自动化各种任务,包括构建、测试和部署软件。Jenkins支持各种运行方式,可通过系统包、Docker或者通过一个独立的Java程序。安装这里的操作系统为WSLUbuntu,其它系统的安装的请参考jenkins官方文档wget-q-O-https://pkg.jenkins.......
  • Java:如何在PowerPoint幻灯片中创建散点图
    散点图是通过两组数据构成多个坐标点,考察坐标点的分布,判断两变量之间是否存在某种关联或总结坐标点的分布模式。散点图将序列显示为一组点,值由点在图表中的位置表示,类别由图表中的不同标记表示,通常用于比较跨类别的聚合数据。本文将为您介如何通过Java代码在PowerPoint幻灯片中创建......
  • vue 之 computed方法自带缓存踩坑1
    使用场景:ant-vue穿梭框使用页面使用computed方法处理组织结构数据,退出页面时,对加载数据做了setnull操作,再次进入页面时,穿梭框只显示数据,无法做左右穿梭功能。原因:computed方法在页面初始化时执行,且只执行一次,并会将方法内的数据进行缓存。退出页面做了数据清除工作,但并为清楚......
  • 手把手带你通过API创建一个loT边缘应用
    摘要:使用APIArts&APIExplorer调用IoT边缘服务接口创建应用,了解边缘计算在物联网行业的应用。本文分享自华为云社区《使用APIArts&APIExplorer调用IoT边缘服务接口创建应用》,作者:华为IoT云服务。开始体验前需注册华为云账号并完成实名认证,实验过程中请使用Chrome浏览器完成相......