浅析一下：Vue.js到底是个什么东西？
1.官网描述
一套用于构建用户界面的渐进式框架…（需要看详细的可以去官网，其实这个描述没多大意义，官网是站在vue这个产品的角度，我觉得还是要站在用户层面—— vue对我们程序猿而言是个啥）
2. 重点——程序猿应该怎么理解vue？
在2021年，不会vue的前端工程师大概率找不到工作（这条是最劲爆的吧）
前端框架里，相对来说vue的入门门槛低，上手相对简单（相对于react.js，node.js而言），所以新手的最佳选择
国内市场占有率很高，特别是中小企业，基本上都是用vue（所以必须得学！！！）
3. vue的优点（为什么使用它，技术层面来说）
性能相对传统dom库（比如jQuery）相对友好
– 传统dom库会直接操作dom，对于浏览器性能不友好
– vue内置了虚拟dom，局部更新dom，减少浏览器性能消耗
帮我们处理好了业务分层
– 传统的组织方式很混乱，代码文件不好维护
– 而vue的脚手架里，各个文件夹都会帮你建好，制定了一些规范，使用起来一目了然，维护也方便
4. vue的两大核心
组件系统。万物皆为组件，实现代码重用，提高开发效率和代码质量，项目的组织形式较为灵活
数据驱动。不直接操作dom，减少性能损耗，数据操作与展现也更加方便。
项目概览
开发工具：vscode（推荐使用的前端开发工具）
Vue版本：V 2.6.11
element ui版本：V 2.15.1
接口调试：axios库 V 0.21.1
脚手架版本: V 4.5.0
node版本：V 13.14.0
1. 脚手架安装与搭建
脚手架安装
旧版本（版本过老，不建议使用了）
拉取 2.x 模板 (旧版本)
npm install vue-cli -g vue init webpack my-project
- 新版本，Vue-cli3.0+（推荐使用）
npm install -g @vue/cli vue create hello-world[项目名]
如存在旧版本，请先删除
npm uninstall vue-cli -g
- 创建命令（UI界面模式）
vue ui
2. 初始创建建议
- 考虑到新手，所以先降低难度，选择此三项即可
其它配置
这样就可以了，它会帮你搭建好一个脚手架，文件目录如下：
打开本地的8080端口（vue默认的）看到如下界面，证明你的第一步就完成了，恭喜恭喜！
3. 引入element ui框架
- 安装
npm i element-ui -S • 1
- 整个引入（不建议，会造成代码冗余，某些组件并没有使用，而你却引入了，就像是娶了很多老婆，你会忙不过来的。但是如果你为了降低难度，可以先这么干）
- 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) });
- 按需引入（推荐使用）
- 需要安装一个插件完成配置
npm install babel-plugin-component -D • 1
- 配置 babel.config.js 文件，代码如下：
module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ], }
- 配置 main.js 入口文件，代码如下
import Vue from 'vue' import App from './App.vue' import router from './router' // 引入需要的组件 import { Button, } from 'element-ui'; // 注册此组件，便可全局使用 Vue.use(Button) new Vue({ router, render: h => h(App) }).$mount('#app') export default vue;
4. 测试UI框架引入是否有效
我们只需要在任意.vue文件添加如下代码：（比如就在HelloWorld.vue页面）
<el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button>
如果代码不报错，并且界面上呈现以下效果，则代表引入成功！（可能需要重启服务）
5. FAQ，需要注意的地方说明
请注意版本，特别是node与vue-cli的版本，一定要配套使用
安装了element ui，服务需要重启，否则不生效
不建议使用cnpm，除非迫不得已，很容易出问题
此为系列文章之一，三天内将会继续更新本系列文章第二篇，大家可以关注一波，不迷路，将持续输出优质文章
将会直接给大家一整个企业落地方案
6. 下次必定更新的点
axios 配置
API层代码设计
接口跨域处理
token管理
请求拦截与响应拦截设置
登录模块设计（真实调接口的方案）
css预处理器 —— sass 配置
高精度权限控制
路由拦截
全局方法与属性的定义
…（更多企业实战技巧）
