Vue 前端工程化 Cli3和ElementUI

Vue脚手架

Vue 脚手架用于快速生成 Vue 项目基础架构，其官网地址为：https://cli.vuejs.org/zh/
安装 3.x 版本的 Vue 脚手架：
npm install -g @vue/cli

脚手架创建项目

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

脚手架项目结构

脚手架自定义配置

1、通过package.json
“vue”: {
“devServer”: {
“port”: “8888”,
“open” : true
}
}
注意：不推荐使用这种配置方式。因为 package.json 主要用来管理包的配置信息；为了方便维护，推荐将 vue 脚
手架相关的配置，单独定义到 vue.config.js 配置文件中。
2、通过vue.config.js
module.exports = {
devServer: {
port: 8888
}
}

ElementUI

一套为开发者、设计者、产品经理准备的基于vue2.0的桌面端组件库 官网地址为： http://element-cn.eleme.io/#/zh-CN 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 并安装 ⑤ 配置插件，实现按需导入，从而减少打包后项目的体积