前端萌新看过来了—— 0基础1小时vue入门到实战

Posted 2021-05-28 欧阳呀

Vue.js+element ui从零开始一个项目

• • 浅析一下：Vue.js到底是个什么东西？
  • 项目概览
  • 1. 脚手架安装与搭建
  • 2. 初始创建建议
  • 3. 引入element ui框架
  • 4. 测试UI框架引入是否有效
  • 5. FAQ，需要注意的地方说明
  • 6. 下次必定更新的点

浅析一下：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

• 整个引入（不建议，会造成代码冗余，某些组件并没有使用，而你却引入了，就像是娶了很多老婆，你会忙不过来的。但是如果你为了降低难度，可以先这么干）
• 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)
});

• 按需引入（推荐使用）

1. 需要安装一个插件完成配置

npm install babel-plugin-component -D

2. 配置 babel.config.js 文件，代码如下：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ],
}

3. 配置 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，需要注意的地方说明

1. 请注意版本，特别是node与vue-cli的版本，一定要配套使用
2. 安装了element ui，服务需要重启，否则不生效
3. 不建议使用cnpm，除非迫不得已，很容易出问题
4. 此为系列文章之一，三天内将会继续更新本系列文章第二篇，大家可以关注一波，不迷路，将持续输出优质文章
5. 将会直接给大家一整个企业落地方案

6. 下次必定更新的点

1. axios 配置
2. API层代码设计
3. 接口跨域处理
4. token管理
5. 请求拦截与响应拦截设置
6. 登录模块设计（真实调接口的方案）
7. css预处理器 —— sass 配置
8. 高精度权限控制
9. 路由拦截
10. 全局方法与属性的定义
11. …（更多企业实战技巧）

如果对你有帮助，关注点赞一波~
*您的支持与鼓励是我深夜码文的最大动力