前端工程化（Vue-cli3和Element-ui）

文章目录

目标：
目录：
1、Vue脚手架
- 1.1、Vue脚手架的基本用法
- 使用步骤：
- 基于交互式命令的方式，创建新版Vue项目
- 图形化方式创建Vue项目
- 基于2.x的旧版本，创建旧版vue项目
- 1.2、Vue脚手架生成的项目结构分析
- 1.3、Vue脚手架的自定义配置
- - 通过package.json配置项目
  - 通过单独的配置文件配置项目（推荐）
2、Element-UI的基本使用
- 基于命令行方式手动安装
- 基于图形化界面自动安装

目标：

能够使用Vue脚手架
　　能够使用Element-UI

1、Vue脚手架

1.1、Vue脚手架的基本用法

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

使用步骤：

安装3.x版本的Vue脚手架
　　npm install -g @vue/cli

安装好以后，可以运行 vue -V 查看Vue脚手架是否安装好以及版本号

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

基于交互式命令的方式，创建新版Vue项目vue create my-project
基于图形化界面的方式，创建新版vue项目vue ui
基于2.x的旧版本，创建旧版vue项目npm install -g @vue/cli-initvue init webpack my-project(my-project是项目名称。自定义)

基于交互式命令的方式，创建新版Vue项目

vue create my-project

创建完Vue项目后，使用【上下箭头】来选中选项，使用【回车】执行某个选项；如果是多选的话，使用【空格】选中你要的选项即可。

图形化方式创建Vue项目

在终端中输入命令：vue ui后，会在浏览器中打开这个页面：

点击【创建】，选择创建项目的路径后，会进入【创建新新项目】的页面中，

如果【手动】创建项目，以下4个是必选的

基于2.x的旧版本，创建旧版vue项目

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

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

如图所示：

1.3、Vue脚手架的自定义配置

只能通过 package.json配置项目或通过单独的配置文件配置项目，二者只能选其一

通过package.json配置项目

//必须是符合规范的json语法
"vue":{"devServer":{"port":8888,//指定项目启动的端口"open":true//项目启动之后自动打开浏览器}
},

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

通过单独的配置文件配置项目（推荐）

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

//vue.config.js文件
module.exports = {devServer:{port:8888,//指定项目启动的端口open:true//项目启动之后自动打开浏览器}
}

在终端输入npm run serve 来运行项目

2、Element-UI的基本使用

Element-UI:一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库。
官网地址为：http://element-cn.eleme.io/#/zh-CN

基于命令行方式手动安装

安装依赖包 npm i element-ui -s
导入Element-UI相关资源

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

在终端输入 npm run serve 运行

基于图形化界面自动安装

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