Vue基本概念与脚手架起手安装vue调试工具-devtools chrome浏览器安装：解压devtools.zip

起手安装vue调试工具-devtools

chrome浏览器

安装：

解压devtools.zip
打开Chrome浏览器 => 点击浏览器右上角小图标，按图示操作

进入

找到第一步中解压的压缩文件

安装完成后，固定显示插件

Vue基本概念

Vue是什么

vue官网。vue是一个渐进式的javascript框架

框架

库: 封装的属性或方法 (例axios.js, jquery.js)，框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)

渐进式: 逐渐按需添加, 想用什么就用什么, 不必全都使用

vue的特点

渐进式
数据驱动视图 (响应式)
组件系统

vue已经是国内最流行的框架，越来越成为前端工程师的一项基础技能。开发更加高率和简洁, 易于维护, 快!快!快!就是块 (甚至测试, Java, Python工程师都要学点vue, 方便与前端沟通)vue可以用来创建PC端,移动端,小程序和桌面应用等多个项目

工程化开发方式：在webpack环境中开发vue，这是最推荐, 企业常用的方式,下面是基础目录

先来感受一下vue的基本代码(一个简单的插值表达式)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/vue.js"></script>
</head>

<body>
  <div id="app">
    <ul id="myUl">
      <li v-for="item in arr">
        {{item}}
      </li>
    </ul>
  </div>
  <script>
    Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示。
    new Vue({
      el: '#app',//el用于指定当前vue实例为哪个容器服务,
      data: {
        arr: ["春天", "夏天", "秋天", "冬天"]

      }//data用于储存数据,供el所指定的容器去使用
    })
  </script>
</body>

![Snipaste_2022-05-03_19-28-28.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9ab8ad2ece154f66a33fca78b4f17b47~tplv-k3u1fbpfcp-watermark.image?)
</html>

效果如下

vue-cli 脚手架介绍

vuecli是什么

vue-cli是vue官方提供的一个全局模块包(通过命令工具行来使用), 用来快速创建一个脚手架项目。

基于webpack
开箱即用,零配置

脚手架是为了保证各施工过程顺利进行而搭设的工作平台

脚手架工程就是一套固定的文件夹+文件+配置的工程, 我们在此基础上开发业务
在开发过程中，脚手架工具是有用的，开发完成（项目上线生产环境），它就没有用了

好处和能力

统一的项目结构(文件夹+文件+配置代码)
开发过程中的webpack各系列支持

- babel支持
- eslint约束语法风格（代码风格）
- 样式预处理器less
- vue单文件支持

提供一个开发时服务器，预览代码（预览项目）

- 自动刷新，方便预览
- 热更新 (只刷新修改的部分)

基于nodejs的命令行工具

如何安装vue-cli脚手架

步骤

设置npm的淘宝镜像

npm config set registry  https://registry.npm.taobao.org/  #设置淘宝镜像地址
npm config get registry  #查看镜像地址

全局安装命令

npm install -g @vue/cli

注意: 如果半天没动静(95%都是网速问题), 可以ctrl + c 停止安装，换一个网络环境来继续重新安装。

检查是否安装成功

在任意小黑窗中：

vue --version

如果可以看到版本号，就表示安装成功了。

vue-cli 创建项目

步骤

创建项目
选择模板
安装依赖
启动项目

1. 创建项目

# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo

2. 选择模板

通过键盘的上下箭头选择合适的模板，如果选择错了，可以按下ctrl+c终止操作。

3. 回车安装依赖

等待脚手架工作自动生成项目文件夹+文件，并下载必须的第三方包。可能要花很久~~~

之后看见绿色即为成功
打开浏览器输入上述地址

代码运行基础

webpack + webpackdevserve

可以在nodemoudels中找到 webpack相关的包。

代码运行流程

整套代码是基于webpack的。

项目打包

npm run build

vue-cli 覆盖webpack配置

背景项目中没有webpack.config.js文件，因为vue用的vue.config.js
操作项目根目录下新建vue.config.js（和src同级）补充devServer

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    host: 'localhost',
    open: true,
    port: 3000
  },
  lintOnSave: false // 关闭eslint
})

vue单文件组件与组件化开发

目标

了解.vue文件的内容

.vue是什么？

在项目中，可以看到很多.vue结尾的文件，它们是什么呢？

.vue文件是单文件组件

后缀名是.vue
webpack会使用额外的loader来处理它

一个.vue文件就是一个组件（页面）
整个项目（页面）就是由多个组件构成的

基本组成

由三个部分组成：template + script + style

template : 决定模块。类似于.html
script：代码逻辑。类似于.js
style: 样式

<template>
 <div class="box">
   我是html模板
  </div>
</template>

<script>
  // 我是js逻辑
  export default {
     data() {
       return {
         // 定义变量，数据
       }
     }
  }
</script>

<style>
  /* 我是css样式 */
  .box {
    color:red
  }
</style>

最后为大家推荐两个好用的插件

代码高亮插件-vscode中安装

代码提示插件-vscode中安装

祝大家月薪15k++++