Vue全家桶系列三： Vue CLI脚手架 - Element UI组件库

Vue CLI ：官方文档

介绍并安装3.x版本的vue脚手架

// --------------------------- 介绍并安装3.x版本的vue脚手架 ----------------------------------
脚手架是快速帮我们生成项目的
先在全局中安装 npm install -g @vue/cli, 一次安装永久使用 
以后使用 就 vue ui ,就能启动可视化面板创建项目了

基于交互式命令行创建新版vue项目

// --------------------------- 基于交互式命令行创建新版vue项目 ----------------------------------
这种新版的命令行方式，我们了解即可，我们一般是用面板的方式安装的

基于图形化界面创建新版vue项目

// --------------------------- 基于图形化界面创建新版vue项目 ----------------------------------
推荐使用这种方式安装， 看图一步步实现即可

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

// --------------------------- 基于2.x的旧模板创建旧版vue项目 ----------------------------------
这种旧版本的命令行方式，我们只做了解即可

分析项目结构

// --------------------------- 分析项目结构 ----------------------------------
以后初始化项目的时候，对文件的作用不了解，就看这张图。
里面部分的配置是在webpack打包的时候配置的，另外一些的配置则是初始化项结构自动生成的

对vue脚手架项目进行自定义配置的两种方式

// --------------------------- 对vue脚手架项目进行自定义配置的两种方式 ----------------------------------
可以设置vue项目的端口，和运行npm run serve 自动打开浏览器。查看项目效果。

介绍element-ui并基于命令行方式手动安装

// --------------------------- 介绍element-ui并基于命令行方式手动安装 ----------------------------------
因为之前通过可视化面板已经创建好了vue项目， 
现在安装element-ui，就能使用它里面的布局了， 
我们拷贝了布局到自己项目中， 并在main中配置了element-ui的配置，
通过页面我们用命令行方式安装element-ui是成功可以用的

基于图形化界面自动安装element-ui

// --------------------------- 基于图形化界面自动安装element-ui ----------------------------------
重新使用一次可视化vue ui脚手架方式创建一个新的项目， 因为之前已经创建过了，
就直接使用了预设，快速完成安装，并在插件中搜索插件，下载了插件。
但是这种方式的好处就是，你只管下载好，里面的代码就会自动配置好，粘贴按钮，
就能看到按钮样式的，是脚手架自动帮我们创建的
1：它帮我们在main.js中导入了element.js文件
2：在elment.js中解构出来button按钮， 用哪个就解构哪个， 这样项目体积会小些
3：直接拷贝代码到自己App.vue中查看效果，nice，可以用。

下一篇：Vue全家桶系列四：Vuex 数据管理、共享