vue学习(十一)vue-cli3开发单文件组件
时间:2019-11-27
本文章向大家介绍vue学习(十一)vue-cli3开发单文件组件,主要包括vue学习(十一)vue-cli3开发单文件组件使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一 单文件组件介绍
/* * 在vue中 把.vue的文件称为 单文件组件 webpack等构建工具 * * 很多项目中使用 * Vue.components('组件名',{}) * new Vue({}) * 用在中小规模的项目中 会很好 但是大型的项目 就不友好了 * * 有哪些缺点 * 1. 全局定义 每个名字都不能重复 * 2. 字符串模板【还好的是es6提供了模板字符串】遇见特殊的符号时 要用 反斜杠来转义 很繁琐 * 3. 不支持css * 4. 没有构建步骤 * * * 以后的模块化开发 包括了 template style script * */
二 如何安装Vue-Cli3脚手架
① 安装node.js
https://nodejs.org/en/download/
保证Node.js 是8.9或者更高的版本
在终端 node -v 保证已经安装
② 安装 淘宝镜像源
npm install -g cnpm --registry=https://registry.npm.taobao.org
以后的npm可以使用cnpm来代替
③ 安装Vue Cli3脚手架
cnpm install -g @vue/cli
④ 检查版本是否正确
vue --version
三 快速原型开发
使用 vue serve 和 vue build命令对单个 *.vue 文件进行快速原型开发,不过这需要先额外安装一个全局的扩展:
cnpm install -g @vue/cli-service-global
vue serve 的缺点就是它需要安装全局依赖,这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。
开始测试
1 npm init
新建一个App.vue文件
<template>
<div><h3>{{msg}}</h3></div>
</template>
<script>
export default {
data(){
return{
msg:'单文件测试'
}
}
}
</script>
<style scoped>
h3{
color: red;
}
</style>
然后在这个App.vue文件所在的目录下运行
vue serve
四 vue-cli3生成项目
五 购物车项目搭建
六 购物车项目操作
七 Mock模拟数据
八 如何做数据持久化
九 Vue中使用第三方组件(element-ui)
十 Element的表单组件分析
十一 表单组件设计-Input实现双向数据绑定
十二 表单组件-设计FormItem组件
十三 表单组件设计-如何正确设计表单校验规则
十四 表单组件设计-Form组件检验方法完结
原文地址:https://www.cnblogs.com/a438842265/p/11943872.html
- GitHub上大热的Deep Photo终于有TensorFlow版了!
- 资源 | Style2paints:专业的AI漫画线稿自动上色工具
- Github 项目推荐 | 真实全景图像强化学习 AI 平台 —— Matterport3DSimulator
- Github 项目推荐 | 用 Pytorch 实现的 Capsule Network
- 野外动物监测图像挑战赛:预测捕捉到的野外图像是否包含动物
- Github 项目推荐 | 用 Keras 实现的神经网络机器翻译
- Github 项目推荐 | 类 Keras 的 PyTorch 深度学习框架 —— PyToune
- Github 项目推荐 | 可提取结构化信息的自然语言理解 Python 库 Snips NLU
- 工具| 诸神之眼nmap定制化之并发处理
- 确认过眼神,ZZCMS 8.2 任意文件删除是你想要的
- golang go语言 http包 和 高并发下的websocket
- Golang学习-第一篇 Golang的简单介绍及Windows环境下安装、部署
- 兄dei ! 请接住FineCMS的GetShell姿势
- 剖析Go的读写锁
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 新一代基于大数据的管理信息系统(MIS)报表需求开发
- 3. docker-compose实战--ghost app
- 2.1 Kubernetes--Pod
- 3. Kubernetes集群安装
- macOS VirtualBox 桥接模式 设置静态ip 且能和联网
- 重新初始化k8s master节点
- 5.k8s基本命令汇总
- 6. k8s + jenkins 实现持续集成(完)
- 7. 复制k8s Node节点 并重新初始化k8s-nodes2节点 (k8s连载)
- 8.k8s连载--重新生成k8s token(kubeadm join报错及解决)
- 3. dcoker容器的命令
- 4. 镜像的原理
- 5.docker容器数据卷
- 6. Dockerfile详解
- 3.docker搭建一个博客平台