从0到Vue3企业项目实战【01.Vue的基本概念与学习指南】

为什么要学习Vue

  • 原生js开发效率慢,代码复杂
  • Vue开发速度快,写少的代码完成多的功用
  • 国内最热门的前端结构三大js结构之一

Vue开展简史

graph TD
2012-html+css+div+js --> 2013-js中参加jquery --> 2014-MVC-angular1.0-react同年Vue正式发布1.0版别 --> 2015-vue-router,vuex,vue-cli相继发布-vue从视图层库开展为一个渐进式结构 --> 2016-Vue吸收了react的虚拟Dom方案而且开端支持服务端烘托 --> 2019-发布了2.60版别,这是一个承上启下的版别,并在之后推出了vue3 --> 2020-9-18-Vuejs3.0正式发布

举个栗子

  • 当咱们需求循环烘托一个列表的时分 在原生j前端学什么s中咱们的写法
    <ul id="myUl"></ul>
    <script>
        let arr = ["张三","李四","王五"]
        let myUl = document.getElementById("myUl")
        arr.map(item => {
            let xiaoLi = document.createElement("li")
            xiaoLi.innerHTML = item
            myUl.appendChild(xiaoLi)
        })
    </script>

在vue中咱浏览器历史记录设置们的写法

    <li v-for="item in arr">{{item}}</li>
    <script>
         new Vue({
            data: {
                arr: ["张三","李四","王五"]
            }
        })
    </script>

咱们能够发现,Vue后端需要学什么语法更简洁,而且类似于创立Dom,遍历数组等等这些比较繁琐的作业Vue都替代咱们经过一个指令v-for为咱们完成了,让咱们语法更简洁,一起在数据绑定与监听方面都有咱们看不见的处理,在Vue里边你无需书写许多的js代码依旧能够完成前端常见的数据动态绑定,d仓鼠饲养八大禁忌om显影操控等前端常见操作,vue都为你以语法糖的办法封装了起来前端工程师减少了开发者学习本钱以及运用本钱

前置的学习条件

在学习Vue之前,期望你后端开发工程师能至少熟悉以下根底知识,Vue是建立于这些根底之上而完成的,假设你未把握以下内容便开端了Vu浏览器推荐e的学习,那么实践过程中你可能会遇到诸多困难

  • HTML + CSS(作为页面布局与款式的根底,基本上全部的前端项浏览器历史记录设置目都绕不开的根底中的根底)期望你至少把握其中的常用语法
  • js 前端结构的根底,Vue结构便是依据js封装的
  • ajax 前后端分离的根底,前后端交互离不开接口,调用接口又离不开ajax

Vue学习之路

笔者会从装置长沙师范学院Vue -> Vue项目目录介绍 -&g后端是做什么的t; Vue环境装备 逐步让咱们把握Vue.js,这将对你后边的了解至关重要

装置node环境

要装置包首先得有包管理东西,node和yarn需求装置到本地环浏览器的历史境中,点击进入官网下载NodeYarn

包管理东西的挑选

在包的挑选方面我引荐选中y长沙市疫情最新情况arn,由于yarn对比node有如下几个优势

  1. yarn在下载以及装置依靠包选用的是多线程的办法,而node则是单线常熟市疫情程,速度上面yarn更具优势
  2. yarn会在用户本地前端和后端哪个工资高缓存已下载过的依靠包,优先会从缓存中读取依靠包,仅本地缓存不存在的情况才会采纳远端请求的办法;而npm则是全量请求,速度上再次拉开差距
  3. ya浏览器历史上的痕迹在哪里rn把全部的依靠躺平至同级,有用的减少了相同依靠包重复下载的情况,加快了下载速度而且也减少了node_modules的体积;反观npm则是严厉的依据依靠树下载并放置到对应位置,导致相同的包屡次下载、node_modu浏览器下载les体积大的问题

装置第三方包的流程概要

包的装置基本上分为五步

  1. checking:检查装备项(.yarnrc、指令行参数、package.json信息等)、兼容性(cpu、nodejs 版别、操作系统等)是否契合约定
  2. resolveStep:解析依靠包信息,而且会解析出整个依靠树上全部包的具体版别信息
  3. fetchStep:下载全部依靠包,如果依靠包现已在缓存中存在则越过下载,后端开发需要学什么反之则下载对应依靠包到缓存文件夹内,当这一步都完成后代表着全部依靠包都现已存在缓存中了
  4. linkStep:将缓存的依靠包扁平化的复制副本到项目的依靠目录下
  5. buildStep:关于一些二进制包,需求进行编译,在这一步进行

引荐运用的编辑器

干流的前端编辑器有vscode以及submit和uni等,这儿前端学什么笔者运用的是vsCode长生十万年进行开发,vsCode装置插件后很方便,

装置Vue

将Vue增加到你的项目中一般有这么几种办法

  1. 在页面上以CD浏览器历史上的痕迹在哪里N 包的办法导入。
  2. 下载 JavaScript 文件并自行保后端管。
  3. 运用npm装置它。
  4. 运用官方的CLI后端是什么工作来构建一个项目,它为现代前端作业流程供给了功用齐备的构建设置后端框架 (例如陈思思,热重载、保存时的提示等等) 咱http 404们最为常用的办法便是第四种 运用官方的cli东长沙市天气西来构建咱们的项目,故其他办法本文将不再赘述

装置官方的cli东西

基本上这个cli东西咱们会进行大局装置 这样在任何一个指令窗口咱们都能够进行构建vue项目脚手架十分方便 按照以下过程执行装置vue/cli东西

  1. 翻开指令行窗口 win+R 输入cmd 回车翻开指令行窗口
  2. 输入装置指令
  3. 主张运用yarn速度和稳定性都更优 装置指令如下
yarn global add @vue/cli
# 或
npm install -g @vue/cli

装置后检查是否装置成功 同样在cm前端工程师d窗口后端需要学什么输入指令

vue -V

如何用cli东西创立一个脚手架项目

指令行输入

vue create 项目名称

留意 项目名称不能有大写字母,中文以及特殊符号

  • 前端和后端的区别们这儿以 vue-demo作为示例
vue create vue-demo

假设你是第一次创立会询问是否运用淘宝作为镜像源,回车承认即可(淘宝镜像会更快一些) 而后会问询你要用yarn前端是什么工作或许node哪一种来构建 选ya前端工程师rnHTTP即可 这辰时是几点两个都是只有在第一次创立常熟市疫情项目的时分会询问 之后就没有了

从0到Vue3企业项目实战【01.Vue的基本概念与学习指南】

从0到Vue3企业项目实战【01.Vue的基本概念与学习指南】

从0到Vue3企业项目实战【01.Vue的基本概念与学习指南】
这个只有第一次创立的时分会呈现而后就不会常熟市疫情再重复问询了 咱们先从Vue2开端浏览器历史上的痕迹在哪里学习这一次创立一个Vue2的项目 经过后端是做什么的上下方向键以及回车挑选 挑选好Vue2那么将开端构建

从0到Vue3企业项目实战【01.Vue的基本概念与学习指南】

假设你在构建的时分遇见如下图的过错 能够尝试 指令台输入如下的指令处理

yarn config set ignore-engines true

当呈现这个提示的时分那么基本上就构建完成了

从0到Vue3企业项目实战【01.Vue的基本概念与学习指南】
此刻咱后端需要学什么们在指令行中顺次输入http 500上面提示的指令 开启服务

cd vue-demo
yarn serve

呈现后端是什么工作这个提示即代表服务启动完成 在咱们本地的8080端口上

  • Local表明本地的地址 本地能够经过这个地址拜访 能够点击control+左键拜访
  • Network表明局域网地址 同一局域网下的联网设备都能够经过这个地址拜访你的vue项浏览器历史记录设置

从0到Vue3企业项目实战【01.Vue的基本概念与学习指南】

Vue项目目录介绍

下图便是大体上的项目结构,下面我会逐个详细介绍

从0到Vue3企业项目实战【01.Vue的基本概念与学习指南】

node_modhttpwatchules与packge.json

当咱们运用npm或许yarn 装置第三方包的时分 文件本体会寄存于这个文件夹,一起会在packge.json记录一个依仓鼠寿命

publihttpclientc

静态资源寄存长沙市天气的地址,内部的favicon.ico长沙市疫情最新情况表浏览器顶部导航栏的左上角的小图标,一般用来放置公司的log index.html 关于vue来说是总的进口文件,vue是单页运用全部的事务挂载在id为app的div上经过路由来动态烘托 当浏览器禁用js的时分则会显现noscript标签中的内容

从0到Vue3企业项目实战【01.Vue的基本概念与学习指南】

src

src后端开发文件夹中放置的是咱们的事务代码

  • assets文件夹中放置咱们的静前端和后端的区别态资源 图片等
  • com前端开发需要学什么ponenhttp 500t 中放置组件,自定义组件能够减少代码冗余,提高代码可读性

App.vue

整个运用的根组件 默许的根页面是没有内容的,内部绑定了根组件,根组件的内容便是进口页面的内容

main.js

进口js文件 会引进v辰时是几点ue以及app根组件 而且实例化一个v常熟市疫情ue目标陈涉世家翻译及原文App根组件挂载在index.html的id为app的div

  • 这儿留意陈涉世家翻译及原文的是 import 是前端和后端哪个工资高es6引进的新语法 义在于引进一个现已导出过的模块 由于归于es浏览器历史上的痕迹在哪里语法故仅答应在es模块中运用
  • r仓鼠寿命equire同样能够导入包,归所以CommonJS语法 require许多的被运用在node的语法中require不被浏览器所辨认,但是能够运用webpack等打包东西将其打包成浏览器可辨认的语言
import Vue from 'vue' // 引进了vue目标 类似于 <script src="https://juejin.im/post/7119425230623211551/vue.js" ></script> 
import App from './App.vue'// App.vue 文件里的目标引进过来 (vue项目页面进口)
Vue.config.productionTip = false // 在操控台有一句提示音讯
new Vue({ // 开端实例化vue
  render: h => h(App),// 准备烘托app页面
}).$mount('#app') // 烘托到index.html里的一个id叫app的Dom上

了解代码执行顺序和引进联系

  1. 当你在操控台输入yarn serve的时分,会先进入package.json检查scripts中的映http://www.baidu.com射联系 找到就会执行vue-cli-service serve
  2. 创立index页面中的dom以及大体结构
  3. 进入main.js中引进了现已编写好的app组件到index页面中的id为app的div中
  4. 后边app组件中会运用router组件来动态调用各种资源

从0到Vue3企业项目实战【01.Vue的基本概念与学习指南】

esli浏览器推荐nt是什么,如何处理报错?

eslint是Vue自带的一种编码风格校验东西,内置有严厉的代码校验,比如说当你定义了一个字段但是没有运用过,这个时分eslint就会报错,此刻咱们有两种挑选

  • 处理后端工程师eslint报错,咱们经过检查操控台的报错来处理关于问题,http代理大部分问题都能够百度处理 报错的格式一般为 上面为文件地址 下面为报错的行/列 过错的详细信息
  • 关闭eslint校验 这个时分咱们能够在vue.congig.js中增加浏览器推荐一个 lintOnSave: false没有vue.congig.js能够自行创立一个,该文件用于覆盖webpack的装备的同样的咱们也能够在该文件内改动端口号等一系列装备
// vue脚手架项目 - 默许装备文件名
// webpack+node 环境 导出装备目标 需求运用 commonjs标准
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port: 3000,// 改动端口号
  },
  lintOnSave: false
})

了解单vue文件浏览器推荐

vue引荐运用 .vue文件来开发项目,vue将文件分为了三部分,分别为:

  • template用来寄存html代码 作为根标签单个页面或组件中只能存在一个该标签
  • script用来寄存js代码
  • style用来寄存css代码 设置scoped 能够保证款式只对当时页面有用 避免类名重复形成的款式穿透

整理无浏览器的历史记录在哪用的模板文件

  • assets 和 components文件夹下的全部文件夹整理掉(不要默许的页面)
  • src/App.vue 默许有许多内容 能够全部 经过仅长生十万年留下主体结构内容辰时是几点全部删去

从0到Vue3企业项目实战【01.Vue的基本概念与学习指南】
app.vue代码仅留下下面的部分

<template>
  <div>app</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

发表回复

提供最优质的资源集合

立即查看 了解详情