Web前端 ---- 【Vue】什么?代码堆在一起不好维护?辛辛苦苦改造的单文件组件用不了?看我直接Vue Cli脚手架安排

目录

前言

单文件组件

什么是单文件组件

单文件组件的内容

Es6模块的导入和导出

创建单文件组件

Vue Cli脚手架



Web前端 ---- 【Vue】什么?代码堆在一起不好维护?辛辛苦苦改造的单文件组件用不了?看我直接Vue Cli脚手架安排_第1张图片

前言

继上篇文章Vue组件的使用介绍了如何使用Vue组件,但是发现有一个很重要的问题,就是代码复用性很差,并且无法提供样式,而这篇将介绍如何改造单文件组件以及Vue cli脚手架的使用

单文件组件

什么是单文件组件

  1. 一个文件对应一个组件
  2. 单文件组件的名字通常是:xxx.vue,这是Vue规定的,只有Vue框架能够认识,浏览器无法直接打开运行。需要Vue框架进行编译,将xxx.vue最终编译为浏览器能识别的html,js,css

单文件组件的内容

  1. 结构:
  2. 交互:
  3. 样式:

Web前端 ---- 【Vue】什么?代码堆在一起不好维护?辛辛苦苦改造的单文件组件用不了?看我直接Vue Cli脚手架安排_第2张图片

由上代码可得知,无法给组件提供样式,接下来,我们在此代码基础上把组件改造为单文件组件

在改造前我们需要了解Es6模块开发中导出和导入

Es6模块的导入和导出

导出:

导出常量、变量、函数或类,只要在声明前加上export关键字即可

如果一个模块只导出一个值(该情况十分常见),此时可以使用 export default 来默认导出

导入:

导入其他模块导出的值需要使用import关键字

import 组件名 from 导入文件的路径

创建单文件组件

在上述原代码的基础上创建三个vue单文件组件

x组件



y组件



root组件



将Vue实例放在单独的js文件中

main.js

import root from './root'

new Vue({
    el:'.app',
    template:`
    
    `,
    components:{root}
})

最后创建容器html页面

index.html

需要将vue和main.js引入

辛辛苦苦改造组件为单文件组件,可以使用了吗?

结果是,没用。

该报错翻译过来就是不能在模块外使用import

那要如何使用呢?Vue Cli脚手架就可以解决

Web前端 ---- 【Vue】什么?代码堆在一起不好维护?辛辛苦苦改造的单文件组件用不了?看我直接Vue Cli脚手架安排_第3张图片

Vue Cli脚手架

关于Vue的脚手架如何安装,在这篇在Vuecli脚手架基础上自定义搭建项目中详细介绍了

Web前端 ---- 【Vue】什么?代码堆在一起不好维护?辛辛苦苦改造的单文件组件用不了?看我直接Vue Cli脚手架安排_第4张图片

直接找到src文件下的App.vue,将我们的根组件root.vue换上去,将components目录下的组件删除,将我们自己的组件换上去,注意import导入时的路径

Web前端 ---- 【Vue】什么?代码堆在一起不好维护?辛辛苦苦改造的单文件组件用不了?看我直接Vue Cli脚手架安排_第5张图片

在main.js中我们发现实例对象里面的配置项与我们略有不同

Web前端 ---- 【Vue】什么?代码堆在一起不好维护?辛辛苦苦改造的单文件组件用不了?看我直接Vue Cli脚手架安排_第6张图片

 我们的实例对象配置项

new Vue({
    el:'.app',
    
    components:{root}
})

脚手架中Vue实例的

new Vue({
  render: h => h(App),
}).$mount('#app')

el配置项和$mount是同理的,指定容器

其中的render函数是使用了箭头函数的用法

render普通函数

render(createElement){
    return createElement(App)
  }

之所以使用render函数是因为Vue脚手架用的是不完整的Vue.js文件,该文件是不包含编译模板字符串的,所以template就无法被编译。之所以使用不完整版的是因为编译模板字符串的文件包体积过大,且后期打包的时候也没用,所以为了体积更小所以舍弃,使用了render函数

Web前端 ---- 【Vue】什么?代码堆在一起不好维护?辛辛苦苦改造的单文件组件用不了?看我直接Vue Cli脚手架安排_第7张图片

你可能感兴趣的:(vue,vue.js,前端,javascript)