Vue 脚手架j基本配置——vue/cli以及 Element-UI 的基本使用

1. Vue 脚手架的基本用法

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

1.1 安装3.x版本的Vue脚手架

npm install -g @vue/cli

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

1.2.1 使用命令创建Vue项目

• 命令：vue create my-project
• 选择Manually select features(选择特性以创建项目)
• 勾选特性可以用空格进行勾选。
• 是否选用历史模式的路由：no (使用hash url 会更好 )
• ESLint选择：ESLint + Standard config
• 何时进行ESLint语法校验：Lint on save
• babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置)
• 是否保存为模板：y( y:yes,n:no;这个看个人了，保存成模板，在下次就会直接调用，不用再配置了)
• 使用哪个工具安装包：npm

1.2.2 基于ui界面创建Vue项目

• 命令：vue ui
  会自动在网页打开界面,顺着步骤配置，跟命令行，配置一样
  
• 其他配置的页面
  

1.2.3 基于 2.x 的旧模板，创建 旧版 vue 项目

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

2. 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:格式效验文件
• .gitignore git提交时忽略文件（直接把文件名写在其中即可）

3. Vue 脚手架的自定义配置

3.1 通过 package.json 配置项目

// 必须是符合规范的json语法
"vue": {
	"devServer": {
	"port": "8888",//与后端对接的端口
	"open" : true//是否开放
	}
}

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

3.2 通过单独的配置文件配置项目

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

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

4. Element-UI 的基本使用

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

4.1 基于命令行方式手动安装

• 安装依赖包 npm i element-ui –S 项目依赖
• 导入 Element-UI 相关资源

  // 导入vue
	import Vue from 'vue'
	//按需使用element组件
   import { Button } from 'element-ui'
   
   Vue.use(Button)

4.2 基于图形化界面自动安装

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