3天学会Vue之基本知识（第三天：单文件组件（vue-cli））：结合项目开发经验，总结最关键的内容

前置知识：

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文件进行配置。具体配置属性可参见：

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文件实现下上面的例子。

3天学会Vue之基本知识（第三天：单文件组件（vue-cli））：结合项目开发经验，总结最关键的内容相关推荐

html引用单文件组件,vue之单文件组件纯网页方式引入
上一节的vue组件开发是把组件内容统一放到了一个js文件里面里面写上模板字符串(引用组件) 这种方式还需要拼接转义写法非常丑陋 vue贴心的帮我们封装了单文件组件可以不用再模板里面拼接字符串下 ...
Vue第七章：项目环境配置及单文件组件 vue脚手
第七章:项目环境配置及单文件组件 vue脚手架回顾: 组件之间的通信父传子:正向传递 vue允许自动触发 props 1.先在子组件中定义期待的属性名和类型 2.在父组件中调用子组件 ...
单文件组件.vue 文件
vuejs 单文件组件.vue 文件 vuejs 自定义了一种.vue文件,可以把html, css, js 写到一个文件中,从而实现了对一个组件的封装, 一个.vue 文件就是一个单独的组件.由于. ...
Vue学习笔记(2) 在html文件中创建Vue实例，并使用http-vue-loader注册单文件组件
本篇博客基于Vue2.x 官方文档:https://cn.vuejs.org/v2/guide/instance.html 最近和同学合作一个设备信息管理的小项目,而同学找的模板不是前后端分离的因此 ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
单文件组件 | Vue.js
# 单文件组件通过 Vue School 上的免费视频课程学习单文件组件 # 介绍 Vue 单文件组件(又名 *.vue 文件,缩写为 SFC)是一种特殊的文件格式,它允许将 Vue 组件的模板.逻 ...
3天学会Vue之基本知识（第一天：语法基础）：结合项目开发经验，总结最关键的内容
VUE官网教程内容比较多,结合项目经验,总结了些内容. 掌握这些基本的,应该可以满足日常90%以上需要. 前置知识: 1.javascript(基本js语法,部分ES6语法) 2.css(知道语法规则 ...
Vue多个单文件组件使用
在project目录下创建components文件夹,然后将所有子组件放入components文件夹下 [创建此目录][文件名的首字母大写] 1.多组件嵌套使用 Child1.vue <tem ...
Vue单文件组件环境配置
单文件组件不能直接运行使用,需要依赖node项目对其进行解析打包,在使用之前需要先进行环境配置安装node版本管理工具nvm curl -o- https://raw.githubuserconte ...
vue教程2 【Vue组件化编程】组件的创建和使用非单文件组件和单文件组件的区别
组件实现局部功能的代码和资源的集合非单文件组件 1.定义组件(创建组件) 2.注册组件 3.使用组件(写组件标签) 定义使用Vue.extend(options)创建,其中options和new ...

3天学会Vue之基本知识（第三天：单文件组件（vue-cli））：结合项目开发经验，总结最关键的内容

3天学会Vue之基本知识（第三天：单文件组件（vue-cli））：结合项目开发经验，总结最关键的内容相关推荐

最新文章

热门文章