Vue单文件组件

 

1. 传统组件的问题和解决方案

问题

全局定义的组件必须保证组件的名称不重复

字符串模板缺乏语法高亮

不支持CSS意味着当HTML和JavaScript组件化时，CSS明显被遗漏

没有构建步骤限制，只能使用html和ES5 JavaScript，而不能使用预处理器（如：Babel）

解决方案

针对传统组件的问题，Vue提供了一个解决方案--使用Vue单文件组成

 

 

 

2. Vue单文件组成的基本用法

单文件组件的组成结构

• template  组件的模板区域
• script  业务逻辑区域
• style  样式区域

 

 

 

 

 

3. webpack 中配置Vue组件的加载器

1. 运行 npm i vue-loader vue-template-compiler -D 命令
2. 在webpack.config.js 配置文件中，添加 vue-loader的配置项如下：

实例：

如果出现了:Error:Can't resolve 'vue' 这种，很可能是没有import vue from 'vue'

 

 

 

 

 

 4. 在webpack 项目中使用vue

1. 运行npm i vue -S 安装 vue
2. 在 src -> index.js 入口文件中，通过 import Vue from 'vue' 来导入vue构造函数
3. 创建 vue的实例对象，并指定要控制的el区域
4. 通过render函数渲染App根组件

 

 

实例：

 

 

 

 

 

 

 

 

 

 

 

 

 5. 单文件组件-webpack打包发布

 上线之前需要通过webpack将应用进行整体打包，可以通过package.json 文件配置打包命令：

 如果遇到这个错误：webpack-cli error unknown option '-p'

改为

webpack --mode production --env production