Vue脚手架的基本用法

1 概述：vue脚手架用于快速生成VUE项目基础架构 ，其官网地址为
2 使用步骤：

1. 安装 3.x 版本的 Vue 脚手架：
   npm install -g @vue/cli
2. 基于3.x版本的脚手架创建vue项目

1.基于交互命令行的方式 创建新版的vue项目
vue create my-project
2.基于图形化界面 创建新版的vue项目
vue ui

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

4 vue脚手架的自定义配置
4.1通过package.json配置项目

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

注意：不推荐使用这种配置方式。因为 package.json 主要用来管理包的配置信息；为了方便维护，推荐将 vue 脚
手架相关的配置，单独定义到 vue.config.js 配置文件中

4.2. 通过单独的配置文件配置项目
① 在项目的跟目录创建文件 vue.config.js
② 在该文件中进行相关配置，从而覆盖默认配置

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

5.Element-UI 的基本使用
Element-UI：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

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);

2. 基于图形化界面自动安装
   ① 运行 vue ui 命令，打开图形化界面
   ② 通过 Vue 项目管理器，进入具体的项目配置面板
   ③ 点击 插件 -> 添加插件，进入插件查询面板
   ④ 搜索 vue-cli-plugin-element 并安装
   ⑤ 配置插件，实现按需导入，从而减少打包后项目的体积