vue2--脚手架

基本用法

Vue脚手架用于快速生成Vue项目基础架构，其官网为：(https://cli.vuejs.org/zh/) 用于让程序员直接上手写代码，而不用去管项目的配置。相当于省去了哪些配置项目插件的步骤。

使用步骤

• 安装3.x的vue脚手架npm install -g @vue/cli
  • 输入vue -V查看是否安装成功

创建步骤：

//1、基于交互式命令行的方式，创建新版vue项目
vue create my-project

//2、基于图形化界面的方式，创建新版vue项目
vue ui

//3、基于2.x堵塞旧模板，创建旧版vue项目
npm i -g @vue/cli-init
vue init webpack my-project

Vue脚手架的自定义配置

1、通过package.json配置项目，新增的代码如下

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

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

2、通过单独的配置文件配置项目

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

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

Element-UI

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

基本使用

基于命令行方式手动安装

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

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

基于图形化界面自动安装

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