从0到Vue3企业项目实战【01.Vue的基本概念与学习指南】为什么要学习Vue 原生js开发效率慢，代码复杂 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正式发布

举个栗子

当我们需要循环渲染一个列表的时候在原生js中我们的写法

    <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代码依旧可以实现前端常见的数据动态绑定，dom显影控制等前端常见操作，vue都为你以语法糖的形式封装了起来，减少了开发者学习成本以及使用成本

前置的学习条件

在学习Vue之前，希望你能至少熟悉以下基础知识，Vue是建立于这些基础之上而实现的，假如你未掌握以下内容便开始了Vue的学习，那么实践过程中你可能会遇到诸多困难

HTML + CSS(作为页面布局与样式的基础，基本上所有的前端项目都绕不开的基础中的基础)希望你至少掌握其中的常用语法
js 前端框架的基础，Vue框架就是基于js封装的
ajax 前后端分离的基础，前后端交互离不开接口，调用接口又离不开ajax

Vue学习之路

笔者会从安装Vue -> Vue项目目录介绍 -> Vue环境配置 逐步让大家掌握Vue.js，这将对你后面的理解至关重要

安装node环境

要安装包首先得有包管理工具，node和yarn需要安装到本地环境中，点击进入官网下载Node Yarn

包管理工具的选择

在包的选择方面我推荐选中yarn，因为yarn对比node有如下几个优势

yarn在下载以及安装依赖包采用的是多线程的方式，而node则是单线程，速度上面yarn更具优势
yarn 会在用户本地缓存已下载过的依赖包，优先会从缓存中读取依赖包，仅本地缓存不存在的情况才会采取远端请求的方式；而npm则是全量请求，速度上再次拉开差距
yarn把所有的依赖躺平至同级，有效的减少了相同依赖包重复下载的情况，加快了下载速度而且也减少了node_modules的体积；反观npm则是严格的根据依赖树下载并放置到对应位置，导致相同的包多次下载、node_modules体积大的问题

安装第三方包的流程概要

包的安装基本上分为五步

checking：检查配置项（.yarnrc、命令行参数、package.json 信息等）、兼容性（cpu、nodejs 版本、操作系统等）是否符合约定
resolveStep：解析依赖包信息，并且会解析出整个依赖树上所有包的具体版本信息
fetchStep：下载全部依赖包，如果依赖包已经在缓存中存在则跳过下载，反之则下载对应依赖包到缓存文件夹内，当这一步都完成后代表着所有依赖包都已经存在缓存中了
linkStep：将缓存的依赖包扁平化的复制副本到项目的依赖目录下
buildStep：对于一些二进制包，需要进行编译，在这一步进行

安装Vue

将Vue添加到你的项目中通常有这么几种方式

在页面上以 CDN 包的形式导入。
下载 JavaScript 文件并自行托管。
使用 npm 安装它。
使用官方的 CLI 来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等) 我们最为常用的方法就是第四种 使用官方的cli工具来构建我们的项目，故其他方法本文将不再赘述

安装官方的cli工具

基本上这个cli工具我们会进行全局安装这样在任何一个命令窗口我们都可以进行构建vue项目脚手架非常方便按照以下步骤执行安装vue/cli工具

打开命令行窗口 win+R 输入cmd 回车打开命令行窗口
输入安装指令
建议使用yarn速度和稳定性都更优安装指令如下

yarn global add @vue/cli
# 或
npm install -g @vue/cli

安装后检查是否安装成功同样在cmd窗口输入命令

vue -V

如何用cli工具创建一个脚手架项目

命令行输入

vue create 项目名称

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

我们这里以 vue-demo作为示例

vue create vue-demo

假如你是第一次创建会询问是否使用淘宝作为镜像源，回车确认即可（淘宝镜像会更快一些）而后会问询你要用yarn或者node哪一种来构建选yarn即可这两个都是只有在第一次创建项目的时候会询问之后就没有了

这个只有第一次创建的时候会出现而后就不会再重复问询了我们先从Vue2开始学习这一次创建一个Vue2的项目通过上下方向键以及回车选择 选择好Vue2那么将开始构建

假如你在构建的时候遇见如下图的错误可以尝试命令台输入如下的命令解决

yarn config set ignore-engines true

当出现这个提示的时候那么基本上就构建完成了此时我们在命令行中依次输入上面提示的命令开启服务

cd vue-demo
yarn serve

出现这个提示即代表服务启动完成在我们本地的8080端口上

Local表示本地的地址本地可以通过这个地址访问可以点击control+左键访问
Network表示局域网地址同一局域网下的联网设备都可以通过这个地址访问你的vue项目

Vue项目目录介绍

下图就是大体上的项目结构，下面我会一一详细介绍

node_modules与packge.json

当我们使用npm或者yarn 安装第三方包的时候文件本体会存放于这个文件夹，同时会在packge.json记录一个依赖

public

静态资源存放的地点，内部的favicon.ico代表浏览器顶部导航栏的左上角的小图标，一般用来放置公司的log index.html 对于vue来说是总的入口文件，vue是单页应用所有的业务挂载在id为app的div上通过路由来动态渲染当浏览器禁用js的时候则会显示noscript标签中的内容

src

src文件夹中放置的是我们的业务代码

assets文件夹中放置我们的静态资源图片等
component 中放置组件，自定义组件可以减少代码冗余，提高代码可读性

App.vue

整个应用的根组件默认的根页面是没有内容的，内部绑定了根组件，根组件的内容就是入口页面的内容

main.js

入口js文件会引入vue以及app根组件并且实例化一个vue对象 将App根组件挂载在index.html的id为app的div上

这里注意的是 import 是es6引入的新语法义在于引入一个已经导出过的模块因为属于es语法故仅允许在es模块中使用
require同样可以导入包，属于是CommonJS语法 require大量的被使用在node的语法中require不被浏览器所识别，但是可以使用webpack等打包工具将其打包成浏览器可识别的语言

import Vue from 'vue' // 引入了vue对象 类似于 <script src="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上

了解代码执行顺序和引入关系

当你在控制台输入yarn serve的时候，会先进入package.json检查scripts中的映射关系找到就会执行vue-cli-service serve
创建index页面中的dom以及大体结构
进入main.js中引入了已经编写好的app组件到index页面中的id为app的div中
后面app组件中会使用router组件来动态调用各种资源

eslint是什么，如何解决报错？

eslint是Vue自带的一种编码风格校验工具，内置有严格的代码校验，比如说当你定义了一个字段但是没有使用过，这个时候eslint就会报错，此时我们有两种选择

解决eslint报错，我们通过查看控制台的报错来解决对于问题，大部分问题都可以百度解决报错的格式通常为上面为文件地址下面为报错的行/列错误的详细信息
关闭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 默认有很多内容可以全部通过仅留下主体结构内容全部删除

app.vue代码仅留下下面的部分

<template>
  <div>app</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

来看看我的其他章节吧,正在长更中

从0到Vue3企业项目实战【01.Vue的基本概念与学习指南】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【02.了解并理解Vue指令以及虚拟Dom】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【03.vue基本api入门】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【04.从vue组件通讯到eventBus以及vuex(附mock接口与axios简单实践)】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【05.vue生命周期】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【06. $ref与$ nextTick使用】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【07.vue动态组件,组件缓存,组件插槽,子组件直接修改props,自定义指令看这一篇就够了】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【08.Vue路由基础】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【09.Vue路由进阶】 - 掘金 (juejin.cn)

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