关键词：
前置知识：
1、VUE的基本语法知识；
2、javascript（基本js语法）；
3、css（知道语法规则即可，无需全部掌握）；
4、html（知道标签规则即可）；
5、Vue组件基础知识
单文件组件的基本知识：
1、为什么要用单文件组件？像写HTML一样写vue组件，官方解释如下：
2、安装：npm，cnpm，vue-cli，webpack（自行百度，具体如下：）
注意：vue-cli安装后，进入cmd，输入vue ui如果没有弹出http://localhost:8000/的页面，就是表示vue-cli的版本不对。先卸载，然后安装最新版本（建议：能用图形化模式建立vue脚手架就不要调整命令行难度）
卸载当前版本：npm uninstall vue-cli -g
安装最新版本：npm i -g @vue/cli
3、创建vue-cli、运行
（1）创建：cmd进入命令行后，输入vue ui，在弹出http://localhost:8000/的页面进行图形化傻瓜式创建。主要界面如下：
注意：选择手动方式，选择一些必要的内容。避免后续再手动增加。
（2）运行：用webstrom或其他IDE打开（如：Hbuilder x），右键package.json，打开npm面板：
编译成功后：
在浏览器中，输入上面地址即可访问。
注意：端口默认是8080，也可以通过vue.config.js文件进行配置。具体配置属性可参见：
前期学习过程中可不做了解，用其默认值就好。
3、单文件组件核心知识点
（1）vue-cli目录结构以及各文件作用（vue ui自定义阶段，不同的创建内容，会有不同的文件和目录，但核心的src目录及子目录, main.js, vue.config.js, app.vue都有），直接引用网上的资料（【Vue】Vue-cli(脚手架)的目录结构详解（转载）_敦厚的曹操的博客-CSDN博客_vue脚手架目录介绍和vue-cli目录结构解析_浅香沉木的博客-CSDN博客_vue-cli目录结构）：
下图是按照我建议的配置，构建的vue-cli目录（可以和上图对比一下）：
（2）单文件组件组成
其中：
：前端代码，
中怎么写，这里就怎么写
组件代码，之前组件怎么写，这里就怎么写。
样式代码(CSS)，css怎么写，这里就怎么写，教程里推荐用less，我个人反而建议就用原生的CSS，但别人的less要能看懂。
（3）IDE的语法检查与处理
在创建vue-cli项目时，会选择语法检查的方式，即：
初入门的时候会非常不习惯，因为严格要求的编程风格的规范，按照之前js的写法会比较多的报错。但值得点赞的是webform为编程提供了语法检查与自动修订的快捷方式。如：
点击后，一般按照下图方式选择修复方式即可：
修复后的标准写法：
4、例子：
上一篇内容中，全局组件，切换到单文件组件
上图分别创建了一个组件，并在views中创建了一个页面对其进行调用。
具体代码如下（见文底有道笔记超链接）
思考：这里的component只是为了展示封装和调用。大多数情况下，具体的业务逻辑都不会高度复用，故，不用封装component，只写views文件也可以。那么，试着在不写component的下，只写view文件实现下上面的例子。
相关代码：
程序老鸟c#学习：3天学会全部基础--第三天(代码片段)
往期文章分享点击跳转=>熬夜再战Android从青铜到王者-UI组件快速搭建App界面点击跳转=>熬夜再战Android从青铜到王者-几个适配方案点击跳转=>熬夜再战Android从青铜到王者-开发效率插件篇点击跳转=>Unity粒子特... 查看详情
3天学会vue之基本知识（第一天：语法基础）：结合项目开发经验，总结最关键的内容
VUE官网教程内容比较多，结合项目经验，总结了些内容。掌握这些基本的，应该可以满足日常90%以上需要。前置知识：1、javascript（基本js语法，部分ES6语法）2、css（知道语法规则即可，无需全... 查看详情
3天学会vue之基本知识（第一天：语法基础）：结合项目开发经验，总结最关键的内容
VUE官网教程内容比较多，结合项目经验，总结了些内容。掌握这些基本的，应该可以满足日常90%以上需要。前置知识：1、javascript（基本js语法，部分ES6语法）2、css（知道语法规则即可，无需全... 查看详情
第三天知识总结
字符串的重点内容：#将int转化为二进制的最少位数a=2a1=a.bit_length()print(a1)a2=3a3=a2.bit_length()print(a3)#bool--->int的例子（重点理解）whiletrue:passwhile1:#效率高点pass#str--->bool#s=‘‘--->false中间为空#s=‘任何东西‘--->true#例子(重 查看详情
第三天知识点
知识点回顾：1.tomcat安装及目录介绍JAVA_HOMECATALINA_HOMEPATH=%JAVA_HOME%/bin; 2.静态web项目、动态web项目WEB-INFlibclassesweb.xml3.外部动态web项目server.xml<host><Contextpath=""docBase=""/></host> 4.to 查看详情
python3-三天学会微信小程序（python后端研习）(代码片段)
文章目录一、day01微信小程序1.问题2.环境的搭建2.1Python环境2.2小程序环境2.2.1申请一个微信公众平台2.2.2保存自己的appid2.2.3下载开发者工具2.2.4创建项目3.开发小程序3.1全局配置3.2组件3.2.1text3.2.2view3.2.3image3.3样式3.3.14.flex布局5.实... 查看详情
html第三天学习笔记
昨天学的超链接，今天深入学习了下，发现了更多的知识点，而且关于初始新建网页时，由于是初学者，所以还是纯手写代码~1<html>2<head>3<title>超链接</title>4<metahttp-equiv="content-type"content="text/html;charset=utf-... 查看详情
第一周第三天日报
姓名段杰时间2016年6月29日工作进展 今天进行了：1） 服务端与客户端的建立和分离2） 本地记录存取3） 数据库重新设计4） 讨论了接下来的增加功能 所遇问题服务器的建立难度较大未能按时编写... 查看详情
第三天学习总结
#######################list类列表########################li=[1,2,343,‘dfas‘,[‘fsad‘,‘dfas‘],True]#list是一个集合能放任何东西进去#print(li[0:3])#list是可以修改的#索引法#li[1]#a=li[4][0]value=‘fsad‘#切片法#li[3:5]=[3223,3432]#列表中的 查看详情
包学会之浅入浅出vue.js：结业篇
在第一篇《包学会之浅入浅出Vue.js：开学篇》和上一篇《包学会之浅入浅出Vue.js：升学篇》的学习中，我们首先了解了Vue环境的搭建以及两个重要思想——路由和组件的学习，通过组件库中的按钮组件和导航组件，相信大家也开... 查看详情
包学会之浅入浅出vue.js：结业篇
在第一篇《包学会之浅入浅出Vue.js：开学篇》和上一篇《包学会之浅入浅出Vue.js：升学篇》的学习中，我们首先了解了Vue环境的搭建以及两个重要思想——路由和组件的学习，通过组件库中的按钮组件和导航组件，相信大家也开... 查看详情
01vue之hellowolrd
...一些绑定的语法、用法等都非常精炼，很容易上手，而且第三方的插件都非常丰富，社区非常活跃，最新的文档都有中文版本。而且Vue配合官方的和第三方的库可以实现单文件的组件化开发、SPA等 查看详情
三天学会html5之第一天
引言HTML5一直是非常热门的话题，因此此系列文章主要从一些基本功能開始讲起，逐步深入了解HTML5的新概念。 首先了解一些主要的术语和概念。SGML,HTML,XML三者之间的差别Doc类型是什么HTML5有什么新特点新优势。学习HTML5 ... 查看详情
第三天重要知识点归纳(代码片段)
文本元素（标签）元素会默认些样式，最后都可以被CSS覆盖的h1~h6标签：一级标题~6级标题p标签：段落q标签：小段内容引用，内容默认由双引号包括--“内容”blockquote标签：大段内容引用abbr标签：显示缩写内容（关键字）如：&l... 查看详情
第三天
第三天昨天：1.继续复习相关Java语言编程语言； 2.编程出窗口的基本框架； 3.调整窗口的长宽高；今天：1.增加窗口的边框，颜色或者条纹； 2.可以调整背景色彩... 查看详情
具有单文件组件的 Vuejs 嵌套组件
】具有单文件组件的Vuejs嵌套组件【英文标题】：Vuejsnestedcomponentswithsinglefilecomponents【发布时间】：2018-08-1209:22:23【问题描述】：我正在尝试使用嵌套的单个文件组件，但它不起作用。这是我的main.js文件：importVuefrom\'vue\'importBoot... 查看详情
淘淘商城第三天笔记
第三天笔记1课程计划后台管理商品的添加功能1、商品分类选择2、上传图片3、富文本编辑器（kindEditor）4、实现商品的添加5、课后作业（商品的修改、删除）2商品添加功能说明3类目选择3.1需求点击类目选择按钮弹出类目选择窗... 查看详情
在 Vue.js 单文件组件中导入外部 js 库
】在Vue.js单文件组件中导入外部js库【英文标题】：ImportingexternaljslibraryinVue.jsSingleFileComponent【发布时间】：2017-11-0823:30:15【问题描述】：我在Vue.js中有以下单个文件组件。plasmid标签原本是由angularplasmid.complete.min.js文件呈现的，... 查看详情