1、Vue 单文件组件
1.1 传统组件的问题和解决方案
（1） 问题
- 全局定义的组件必须保证组件的名称不重复。
- 字符串模板缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \ 。
- 不支持 CSS 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏。
- 没有构建步骤限制，只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器（如：Babel）。
（2）解决方案
针对传统组件的问题，Vue 提供了一个解决方案 —— 使用 Vue 单文件组件。
1.2 Vue 单文件组件的基本用法
单文件组件的组成结构：
-
template：组件的模板区域 。 -
script：业务逻辑区域 。 -
style：样式区域。
<template>
<!-- 这里用于定义Vue组件的模板内容 -->
</template>
<script>
// 这里用于定义Vue组件的业务逻辑
export default {
data() { return {} }, // 私有数据
methods: {} // 处理函数
// ... 其它业务逻辑
}
</script>
<style scoped>
/* 这里用于定义组件的样式 */
</style>1.3 webpack 中配置 vue 组件的加载器
① 运行 npm i vue-loader vue-template-compiler -D 命令。
② 在 webpack.config.js 配置文件中，添加 vue-loader 的配置项如下：
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它规则
{ test: /\.vue$/, loader: 'vue-loader' }
]
},
plugins: [
// ... 其它插件
new VueLoaderPlugin() // 请确保引入这个插件！
]
}1.4 在 webpack 项目中使用 vue
① 运行 npm i vue –S 安装 vue 。
② 在 src -> index.js 入口文件中，通过 import Vue from 'vue' 来导入 vue 构造函数。
③ 创建 vue 的实例对象，并指定要控制的 el 区域。
④ 通过 render 函数渲染 App 根组件。
// 1. 导入 Vue 构造函数
import Vue from 'vue'
// 2. 导入 App 根组件
import App from './components/App.vue'
const vm = new Vue({
// 3. 指定 vm 实例要控制的页面区域
el: '#app',
// 4. 通过 render 函数，把指定的组件渲染到 el 区域中
render: h => h(App)
})1.5 webpack 打包发布
上线之前需要通过 webpack 将应用进行整体打包，可以通过 package.json 文件配置打包命令：
// 在package.json文件中配置 webpack 打包命令
// 该命令默认加载项目根目录中的 webpack.config.js 配置文件
"scripts": {
// 用于打包的命令
"build": "webpack -p",
// 用于开发调试的命令
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 3000",
},2、Vue 脚手架
2.1 Vue 脚手架的基本用法
Vue 脚手架用于快速生成 Vue 项目基础架构，其官网地址为：https://cli.vuejs.org/zh/ 。
使用步骤：
（1） 安装 3.x 版本的 Vue 脚手架：
npm install @vue/cli -g基于 3.x 版本的脚手架创建 vue 项目
（1）基于 交互式命令行 的方式，创建新版 vue 项目。
vue create my-project
（2）基于 图形化界面 的方式，创建新版 vue 项目（推荐）。
vue ui
（3）基于 2.x 的旧模板，创建旧版 vue 项目。
npm install -g @vue/cli-init
vue init webpack my-project2.2 Vue 脚手架生成的项目结构分析
2.3 Vue 脚手架的自定义配置
（1）通过 package.json 配置项目
// 必须是符合规范的json语法
"vue": {
"devServer": {
"port": "8888",
"open" : true
}
},注意： 不推荐使用这种配置方式。因为 package.json 主要用来管理包的配置信息；为了方便维护，推荐将 vue 脚
手架相关的配置，单独定义到 vue.config.js 配置文件中。
（2）通过单独的配置文件配置项目
① 在项目的跟目录创建文件 vue.config.js 。
② 在该文件中进行相关配置，从而覆盖默认配置。
// vue.config.js
module.exports = {
devServer: {
port: 8888
}
}3、Element-UI 的基本使用
Element-UI：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
官网地址为：https://element-plus.gitee.io/zh-CN/
3.1 基于命令行方式手动安装
① 安装依赖包 npm i element-ui –S 。
② 导入 Element-UI 相关资源。
// 导入组件库
import ElementUI from 'element-ui';
// 导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css';
// 配置 Vue 插件(注册组件)
Vue.use(ElementUI);3.2 基于图形化界面自动安装
① 运行 vue ui 命令，打开图形化界面 。
② 通过 Vue 项目管理器，进入具体的项目配置面板。
③ 点击 插件 -> 添加插件，进入插件查询面板。
④ 搜索 vue-cli-plugin-element 并安装。
⑤ 配置插件，实现按需导入，从而减少打包后项目的体积。
