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

简介: 笔记

浅析一下: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. 初始创建建议


  • 考虑到新手,所以先降低难度,选择此三项即可30.png其它配置1.png

这样就可以了,它会帮你搭建好一个脚手架,文件目录如下:

2.png打开本地的8080端口(vue默认的)看到如下界面,证明你的第一步就完成了,恭喜恭喜!3.png


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)
});
  • 按需引入(推荐使用)
  1. 需要安装一个插件完成配置
npm install babel-plugin-component -D
• 1
  1. 配置 babel.config.js 文件,代码如下:
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ],
}
  1. 配置 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>

如果代码不报错,并且界面上呈现以下效果,则代表引入成功!(可能需要重启服务)4.png


5. FAQ,需要注意的地方说明


请注意版本,特别是node与vue-cli的版本,一定要配套使用

安装了element ui,服务需要重启,否则不生效

不建议使用cnpm,除非迫不得已,很容易出问题

此为系列文章之一,三天内将会继续更新本系列文章第二篇,大家可以关注一波,不迷路,将持续输出优质文章

将会直接给大家一整个企业落地方案


6. 下次必定更新的点


axios 配置

API层代码设计

接口跨域处理

token管理

请求拦截与响应拦截设置

登录模块设计(真实调接口的方案)

css预处理器 —— sass 配置

高精度权限控制

路由拦截

全局方法与属性的定义

…(更多企业实战技巧)


目录
打赏
0
0
0
0
8
分享
相关文章
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
55 10
前端状态管理:Vuex 核心概念与实战
Vuex 是 Vue.js 应用程序的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。本教程将深入讲解 Vuex 的核心概念,如 State、Getter、Mutation 和 Action,并通过实战案例帮助开发者掌握在项目中有效使用 Vuex 的技巧。
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同?
总的来说,Vue 的数据驱动视图在诸多方面展现出独特的优势,其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
116 58
前端性能优化实战:从加载速度到用户体验
前端性能优化实战:从加载速度到用户体验
前端性能优化实战:从代码到部署的全面策略
前端性能优化实战:从代码到部署的全面策略
55 1
前端性能优化实战:从代码到部署的全面指南
前端性能优化实战:从代码到部署的全面指南
63 1
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
37 3
前端性能优化实战:提升网页加载速度
前端性能优化实战:提升网页加载速度
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
608 1
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
137 2

热门文章

最新文章

  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等