首页 > 其他分享 >Vue 单组件入门

Vue 单组件入门

时间:2023-05-22 14:44:50浏览次数:42  
标签:npm vue 入门 HelloWorld js Vue 组件 脚手架

Vue基础入门

一、Vue脚手架

1. 简介

Vue 的脚手架(Vue CLI: Command Line Interface)是 Vue 官方提供的标准化开发平台。它可以将我们.vue 的
代码进行编译生成 html css js 代码,并且可以将这些代码自动发布到它自带的服务器上,为我们 Vue 的开发提供
了一条龙服务。脚手架官网地址:https://cli.vuejs.org/zh
注意:Vue CLI 4.x 需要 Node.js v8.9 及以上版本,推荐 v10 以上。

2. 脚手架安装步骤

  1. 建议先配置一下 npm 镜像:
    1.1 npm config set registry https://registry.npm.taobao.org
    1.2 npm config get registry 返回成功,表示设置成功

  2. 第一步:安装脚手架(全局方式:表示只需要做一次即可)
    2.1 npm install -g @vue/cli
    2.2 安装完成后,重新打开 DOS 命令窗口,输入 vue 命令可用表示成功了

  3. 第二步:创建项目(项目中自带脚手架环境,自带一个 HelloWorld 案例
    3.1 切换到要创建项目的目录,然后使用 vue create vue_pro
    image

这里选择 Vue2,
babel:负责 ES6 语法转换成 ES5。
eslint:负责语法检查的。
回车之后,就开始创建项目,创建脚手架环境(内置了 webpack loader),自动生成 HelloWorld 案例
image

  1. 第三步:编译 Vue 程序,自动将生成 html css js 放入内置服务器,自动启动服务。
    4.1 dos 命令窗口中切换到项目根:cd vue_pro
    4.2 执行:npm run serve,这一步会编译 HelloWorld 案例
    image

ctrl + c 停止服务。
4.3 打开浏览器,访问:http://localhost:8080
image

3. 认识脚手架结构

image

package.json:包的说明书(包的名字,包的版本,依赖哪些库)。该文件里有 webpack 的短命令:
serve(启动内置服务器)
build 命令是最后一次的编译,生成 html css js,给后端人员
lint 做语法检查的。

4. 分析 HelloWorld 程序

image

可以看到在 index.html 中只有一个容器。没有引入 vue.js,也没有引入 main.js
Vue 脚手架可以自动找到 main.js 文件。(所以 main.js 文件名不要修改,位置也不要随便移动)
image

5. 原理图

image

标签:npm,vue,入门,HelloWorld,js,Vue,组件,脚手架
From: https://www.cnblogs.com/AllenMi/p/learn_vue_template.html

相关文章

  • .NET入门相关学习
    2023年05月22日笔记项目信息实体添加新属性①类增加对应属性声明。②快捷键Ctrl+Shift+B生成新应用;或者终端指令dotnetbuild生成新应用。③对应Controller字段增加属性;View视图增加对应部件(Index/Create/Edit);更新 SeedData 类。④PMC中输入指令进行数据库模型迁移:Add-Mi......
  • 通过 命令 DISM /Online /Get-Features 将显示在您的系统上安装的所有Windows功能列
    DISM/Online/Enable-Feature/FeatureName:<组件名称>/Allecho组件已成功启用!pause其中,<组件名称>是您要启用的组件的名称。可以在WindowsServer2022上使用以下命令列出可用组件:DISM/Online/Get-Features运行上面的命令后,将显示在您的系统上安装的所有Windows功能列表......
  • vue用qrcodejs2生成二维码,解决多个二维码追加的问题
    vue使用qrcodejs2生成二维码1、安装qrcodejs2npminstallqrcodejs2 2、代码//这个div用来展现二维码<divid="twoImageId"></div>//生成二维码的方法generateQRCode(classId,value){ newQRCode(document.querySelector(classId),{ text:value, width:......
  • Vue脚手架笔记备注
    笔记脚手架文件结构├──node_modules├──public│├──favicon.ico:页签图标│└──index.html:主页面├──src│├──assets:存放静态资源││└──logo.png││──component:存放组件││└──HelloWorld.vue│......
  • Vue脚手架1
    ##1.1说明1.Vue脚手架是Vue官方提供的标准化开发工具(开发平台)。2.最新的版本是4.x。3.文档:https://cli.vuejs.org/zh/ 1.2具体步骤第一步(仅第一次执行):全局安装@vue/cli。npminstall-g@vue/cli第二步:切换到你要创建项目的目录,然后使用命令创建项目vuecre......
  • Java入门9(HashSet,File文件类)
    HashSetjdk1.7之前,使用数组加链表的方式实现jdk1.8之后,在链表长度大于8并且数组长度超过32的情况下,会转成红黑树结构HashSet的本质是一个HashMap,它所有的value都是一致的,传入的参数作为key,因此HashSet中不允许重复数据存储的时候,键值对位于的数组位置,之和key的HashCode值有关......
  • Vue购物车实例练习
    功能介绍金额=单价*数量金额会自动根据数量的变化进行变化,我们可以点击按钮增加或减少商品的数量。合计金额:只有在序号列号勾选上才会被计入总金额中,金额总数会根据用户的操作自动更新数据。删除:如图我们勾选了第2个商品,当我们点击删除时,只会删除被选中的产品。全选:点击......
  • Pandas 01 快速入门
    Pandas官方文档Pandas(/ˈpændəz/)是一个开源的、BSD许可的库,为Python编程语言提供高性能、易于使用的数据结构和数据分析工具。Pandas适合处理一个规正的二维数据,即有N行N列,类似于SQL执行后产出的,或者无合并单元格Excel表格。一、快速入门1、读取数据importpandasa......
  • VUE npm run serve 提示error Mixed spaces and tabs no-mixed-spaces-and-tabs 解决
    解析:看这个错误提示意思就是“不允许代码中出现空格和tab键混合的情况”大多数代码约定要求使用空格或tab进行缩进,禁止使用空格和tab混合缩进。因此,一行代码同时混有tab缩进和空格缩进,通常是错误的。解决办法:原因找到了,解决办法就是找到spaces和tabs混合的地方,然后统一即可!......
  • vue项目结合vant,实现上拉加载更多,下拉刷新
    上拉加载思路:引入vant组件上拉list后端数据做了分页处理,获取接口数据,渲染到页面上,(此处只会显示一页的数据)设置属性去实现效果,loading,finished为vant组件中提供的每次滚动到底部后把页面数+1,发送一次请求获取新分页数据.获取完数据,将新获取的数据跟上一页获取的数据做......