一、Vue-cli介绍及其作用
什么是Vue-cli手脚架
vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板；预先定义
好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个
骨架项目，这个骨架项目就是脚手架，使我们的开发更加的快速
它有什么作用
1、 统一的目录结构 2、本地调试 3、 热部署 4、单元测试 5、 集成打包上线
具体来说，
使用Vue-cli相比使用Vue原生，他可以更加 快速构建项目结构Vue CLI可以帮助你快速搭建一个Vue项目的基本结构，包括项目文件夹的组织、构建流程、配置文件等，省去了手动配置的繁琐过程。
Vue CLI集成了现代化的前端开发工具，比如Webpack、Babel等，可以帮助你进行模块化开发、代码转译、打包等工作，提高开发效率。
Vue CLI支持插件系统，可以根据项目需求选择安装和配置各种插件，扩展项目功能，提升开发体验。
Vue CLI提供了一个内置的开发服务器，支持热更新，可以在开发过程中实时预览页面效果。
Vue CLI内置了生产环境的优化配置，包括代码压缩、资源合并、懒加载等，帮助你更好地优化项目性能。
Vue-cli环境搭建及其使用
1、安装下载Node.js
简单来说Node.js 是一个前端 js 运行环境或者说是一个 JS 语言解释器。
下载网址：Node.js — 在任何地方运行 JavaScript (nodejs.org)
安装时会自动配置环境变量等，安装完成后可在控制台试运行nmp -v指令，如显示版本号证明安装成功
2、创建一个Vue-Cli项目
使用HBulider X 创建一个Vue-Cli项目
删除package-lock.json和/src/components目录
在scr目录下创建所需的组件（vue文件）
文件结构大致如下<template><div>登录<router-link to="/main">Main</router-link></div></template><script>// export 导出组件export default{//定义组件中的数据data(){return{}},methods:{}}</script><style></style>
在src下创建目录router,router文件夹内创建 index.js
1)注册（导入）组件
import Vue from 'vue';import router from 'vue-router'; /* 导入路由 */import Login from '../Login.vue'; /* 导入其他组件 */import Main from '../Main.vue'; /* 导入其他组件 */
2）定义路由组件
//定义路由组件var rout = new router({routes: [{path: '/',//最初界面component: Login},{path: '/login',//访问组件的地址 必须小写component: Login},{path: '/main',component: Main}]});
4)
//导出路由对象export default rout;5）打开命令行工具，进入你的项目目录，输入命令npm i vue-router@3.5.3
（4）在main.js中配置路由
import router from './router/index.js'Vue.use(router);new Vue({el: '#app',router,render: h => h(App)})
ElementUI
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库.
环境配置
1、在控制台下载ElementUI
npm i element-ui -S
2、在main.js中导入
import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)});如果导入了其他的组件，将重复的代码删除
具体组件可以参考官网API
官网：Element - 网站快速成型工具
