七:前端工程化进阶

一:Vue脚手架

Vue 脚手架用于快速生成Vue项目基础架构，其官网地址https:/cli.vuejs.org/zh/

使用步骤

1:安装3.x版本的Vue脚手架

npm install -g @vue/cli

基于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-project

Vue脚手架生成的项目结构分析

Vue脚手架的自定义配置

1:通过package.json配置项目

//必须是符合规范的json语法
"vue":{
	"devServer":{
		"port":"8888",
		"open“：true
	}
},

注意:不推荐使用这种配置方式。因为package.json主要用来管理包的配置信息；未来方便维护，推荐将vue脚手架相关的配置，单独定义到vue.config.js配置文件中。
2：通过单独的配置文件配置项目
1):在项目的根目录中创建文件vue.config.js
2):在该文件中进行相关配置，从而覆盖默认配置。

//vue.config.js
module.exports = {
	devServer:{
		port:8888
	}
}

Element-UI的基本使用

Element-UI:一套为开发者，设计师和产品经理准备的基于Vue 2.0的桌面端组件库。
官网:https://element.eleme.cn/#/zh-CN

1:基于命令行的方式手动安装

1):安装依赖包 npm i element-ui -S
2):导入Element-UI 相关资源

// 导入组件库
import ElementUI from 'element-ui'
// 导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css'
// 配置Vue插件
Vue.use(ElementUI)

2:基于图像化界面自动安装

1):运行 vue ui 命令，打开图像化界面
2):通过Vue项目管理器，进入具体的项目配置面版。
3):点击插件—>添加插件，进入插件查询面版
4):搜素 vue-cli-plugin-element并安装
5):配置插件，实现按需导入，从而减少打包后项目的体积