前端萌新看过来了—— 0基础1小时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)
});
- 按需引入(推荐使用)
- 需要安装一个插件完成配置
npm install babel-plugin-component -D
- 配置 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 配置
- 高精度权限控制
- 路由拦截
- 全局方法与属性的定义
- …(更多企业实战技巧)
如果对你有帮助,关注点赞一波~
*您的支持与鼓励是我深夜码文的最大动力
前端萌新看过来了—— 0基础1小时vue入门到实战相关推荐
- 新课发布-SpringBoot2.0缓存中间件Redis技术入门与实战(抢红包系统设计与实战)
概要介绍:历经半个多月的时间,Debug呕心沥血.亲自录制的 "缓存中间件Redis技术入门与应用场景实战(SpringBoot2.x + 抢红包系统设计与实战)"的新课终于完成了 ...
- qq纵横四海源码_【0基础】纵横中文网python爬虫实战
原文在此~ [0基础]纵横中文网python爬虫实战mp.weixin.qq.com 大家好,我是你们的机房老哥! 在粉丝群的日常交流中,爬虫是比较常见的话题.python最强大的功能之一也是爬虫. ...
- 视频教程-ZStack 带你0基础搭建私有云平台|ZCCT实战培训视频|-云平台
ZStack 带你0基础搭建私有云平台|ZCCT实战培训视频| ZStack云计算解决方案专家,12年虚拟化与云计算相关工作经验,先后就职于IT系统集成商.国内知名软件上市公司以及云计算服务商,分别从 ...
- java基础入门传智播客 源码_Java-_2020年版Java零基础视频教程(Java 0基础,Java初学入门)魔鬼讲师老杜出品...
不会闲聊!!!不会扯淡!!!小UP只会分享与Java相关的学习资源 还记得那年带你Java入门的一声"吼"吗? B站目前播放量已经快到450多万播放量的Java零基础教程的创作者& ...
- 0基础学Mysql:mysql入门视频教程!
0基础学Mysql:mysql入门视频教程! 目前MySQL技术虽然在国内发展了许多年,但是一直都没有形成一个专门的学科,MySQL的数据库,在很多中小企业的流行做法就是让程序员来管.但是随着近几年互 ...
- 0基础学python看什么书-0基础学Python入门书籍应该看什么?
0基础学Python入门书籍应该看什么?Python 对不少人来说是谜一样的东西不知道如何下手.从何处下手,找了很多资源几个月过去了学习陷入换乱,没没能入门Python开发.出现这种情况大多是因为没有 ...
- 大一萌新看过来,C语言学到什么程度,才能“毕业不失业”!
C语言是目前所有编程语言中公认难度最大的,需要学习技术,掌握知识比较广泛,需要你不断在练习磨炼,所以不像外面培训机构说的几个月就可以出去找工作的. C语言学到什么程度可以出去找工作? 第一,熟练C语言 ...
- 制作中英文双语(多语)网站教程, 0基础1小时WordPress建站视频课程 (一步步建站, 一步也不少)
全套视频课程简介: 中英文双语网站(多语言网站)意思是:一个网站带有二种或多种语言版面的网站类型,可以同时满足不同语言和不同国家用户浏览需求.这套零基础1小时的WordPress 课程将详细讲解如何自 ...
- 24小时学会python_零基础python24小时极速入门学习
本篇文章是 Python 入门必须掌握的知识点,24小时极速入门,是针对那些没有任何编程经验,从零开始学习 Python 的同学 想要快速学会python的6个关键点. 分别是:数据类型. 条件判断. ...
最新文章
- python怎么做折线图_python怎么画折线图
- 10没有基于策略的qos_基于强化学习的用户移动场景下空中基站3D位置高效部署...
- VC++ 2012 单元测试入门
- python 批量创建变量_Python批量生成和调用变量
- 程序员,有什么资格去谈佛系?
- DBS-Function:f_GetPy
- WEB标准 基础(一) 到底是什么?
- 判断socket断开
- SpringBoot+Ajax文件上传+FormData表单提交
- Jquery—JQuery对checkbox的操作(01)
- 2022 年海峡两岸无线科学与技术会议
- 【PDN仿真笔记4-电容布局仿真及结果分析】
- 百度网盘等相关百度产品账号不存在问题
- 手把手教你如何制作iPhone卡贴(多图)
- java http 服务器搭建_基于http.server搭建局域网服务器过程解析
- mysql学习应用_MySQL学习从这里出发!
- ITSS-信息技术服务运行维护标准符合性认证
- 录制课件时,小米笔记本电脑,外接耳麦, 麦克风没那有声音,怎么办?
- easyconnect 通过Vmware虚拟机挂ccproxy变非全局代理
- MySQL页面打捞工具使用方法