前端萌新看过来了—— 0基础1小时vue入门到实战_vue入门需要多长时间

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)
});

• 按需引入（推荐使用）

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

• HTML5新特性，语义化

• 浏览器的标准模式和怪异模式

• xhtml和html的区别

• 使用data-的好处

• meta标签

• canvas

• HTML废弃的标签

• IE6 bug，和一些定位写法

• css js放置位置和原因

• 什么是渐进式渲染

• html模板语言

• meta viewport原理

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】