前端学习之前端工程化(二)：Vue-cli3和Element-UI

一、vue脚手架:

1. vue脚手架的基本使用:

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

2. 使用步骤:

2.1 安装3.x版本的vue脚手架:

npm install -g @vue/cli

2.2 基于3.x版本的脚手架创建vue项目

2.2.1 基于交互式命令行的方式, 创建新版vue项目

vue create my-project

运行项目:

2.2.2 基于图形化界面的方式, 创建新版vue项目:

vue ui

2.2.3 基于2.x的旧模板, 创建旧版vue项目(了解):

npm install -g @vue/cli-init
vue init webpack my-project

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

目录	说明
node_modules	依赖包目录
public	静态资源目录
src	源码目录
src/assets	资源目录
src/components	组件目录
src/views	视图组件目录
src/App.vue	根组件
src/main.js	入口js
src/router.js	路由js
babel.config.js	babel配置文件
.eslintrc.js	eslint语法配置文件

4. Vue脚手架的自定义配置:

4.2 通过package.json配置项目

"vue":{
   "devServer":{
        "port":"9990",
        "open":true
    }
}

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

4.2 通过单独的配置文件进行配置，创建vue.config.js:

• 在项目根目录创建文件 vue.config.js
• 在该文件中进行相关配置, 从而覆盖默认配置;

module.exports = {
  devServer:{
        port:8888,
        open:true
    }
}

二、Element-UI:

1. Element-UI的基本使用:

Element-UI:一套基于2.0的桌面端组件库
官网地址: http://element-cn.eleme.io/#/zh-CN

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

2.1 安装依赖包:

npm install element-ui -S

2.2 导入使用:

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI)

3. 基于图形化的界面自动安装:

3.1 安装:

• 运行 vue ui 命令, 打开图形化界面;
• 通过 vue 项目管理器 , 进入具体的项目配置面板;
• 点击 插件 -> 添加插件 , 进入插件查询面板;
• 搜索 vue-cli-plugin-element 并安装;
• 配置插件, 实现按需导入, 从而减少打包后项目的体积;