Vue-cli 脚手架 + Element-UI

Vue脚手架

用于快速生成 Vue 项目基础架构，官网。

通过npm安装 vue-cli：
npm i -g @vue/cli

创建项目的方式：

• 基于 交互命令行 的方式创建新版 vue 项目：
  vue create my-project my-project 为项目名称
• 基于 图形化界面 的方式创建新版 vue 项目：
  vue ui

推荐使用第二种方式，以下为第二种方式的相关配置：
根目录下新建 vue.config.js 文件：

module.exports = {
    devServer: {
        //自动打开浏览器
        open:true,
        port:8888
    }
}

运行 npm run serve 查看效果。

---

Element-UI 的基本使用

一套为开发者、设计师和产品经理准备的基于 Vue2.0 的桌面端组件库，官网。

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

1.安装依赖包 npm i element-ui -S

2.在 main.js 文件中导入 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.配置插件，实现按需导入，从而减少打包后项目的体积

注意：
下载好插件后配置，右侧 fully import 应改成 import on demand（按需导入）。