Vue-cli 脚手架简介

青春正美
303 阅读7分钟

Vue是一套用于构建用户界面的渐进式JavaScript框架, 她本身只负责构建用于页面(数据渲染到页面上), 仅凭她自己是做不了项目的, 做项目还需要用到别的功能, 如网络请求等, 所以在项目开发过程中, 用到什么就导入什么就好了,然后逐渐集成功能, 这就是渐进式.

vue全家桶是基于vue开发必备的也是必学的东西，概括起来就是：1.项目构建工具 2.http请求 3.路由插件 4.状态管理 5.布局框架。

image.png

今天先来简单讲一下Vue-cli 脚手架

Vue-cli 脚手架

脚手架: 为了保证各施工过程顺利进行而搭设的工作平台，在代码里的体现, 就是一套固定标准的: 文件夹+文件+webpack配置, 想要快速创建一个vue项目就要使用vue脚手架.

使用vue脚手架创建项目流程

  1. 下载 @vue/cli 模块包, vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目.
  yarn global add @vue/cli
  //或者
  npm install -g @vue/cli
  //安装成功通过下面代码查看脚手架版本
  //注意: -V里的V是大写的
  vue -V
  1. 创建项目
  • 项目名不能带大写字母、中文和特殊符号
//vue和create是命令, vuecli-demo是自己的文件夹名
vue create vuecli-demo
  • 2.1输入完vue create vuecli-demo

image.png

  • 2.2 选择vue版本

image.png

  • 2.3 执行相关指令

image.png

分析脚手架创建的项目目录

 vuecil-demo         # 项目目录
    ├── node_modules # 项目依赖的第三方包
    ├── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网页浏览的是它)
    ├── src          # 业务文件夹
      ├── assets     # 静态资源
        └── logo.png # vue的logo图片
      ├── components # 组件目录
        └── HelloWorld.vue # 欢迎页面vue代码文件 
      ├── App.vue    # 整个应用的根组件
      └── main.js    # 入口js文件
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置
    ├── package.json # 依赖包列表
    ├── README.md    # 项目说明
	└── yarn.lock    # 项目包版本锁定和缓存地址
    ├── vue.config.js # 自定义配置(如果你的脚手架不是5版本之后的,需要自己去手动建一个这个文件)

主要文件及含义

node_modules      – 第三方依赖包
public/index.html – 浏览器运行的网页
src/main.js       – webpack打包的入口文件
src/App.vue       – Vue入口页面
package.json      – 依赖包列表文件和自定义命令

项目入口和文件关系
如图所示, 一切从main.js开始, 到index.html结束,即webpack打包的时候,首先读取main.js文件,在main.js里读取APP里的代码, 解析完后挂到了public文件里的index.html.

image.png main.js和App.vue以及index.html作用和关系？

  1. main.js - 项目打包入口 - Vue初始化
  2. App.vue - Vue页面入口
  3. index.html - 浏览器运行的文件
  4. App.vue => main.js => index.html

脚手架-自定义配置

如果项目没有生成vue.config.js文件,就自己建一个和- src文件并列的vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  /* 覆盖webpack的配置 */
  module.exports = {
    devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000
    }
  }
  // 关闭语法检测
  lintOnSave: false
})

脚手架-eslint(了解)

eslint是内置代码检查工具，运行时检查你的代码风格,违反规定就报错.
比如: 先在main.js 随便声明个变量, 但是不要使用

image.png

运行后观察发现, 终端和页面都报错了,这样的错误, 证明eslint发现你代码不严谨.

image.png 解决方法
如果在开发的时候,不想让它提示,可以在vue.config.js中设置lintOnSave为false重启服务器即可.

Vue指令

Vue核心思想: 数据驱动, 组件化开发(盒子复用)

1-数据驱动

数组驱动: Vue会根据数据的变化, 自动去渲染页面

  • 无需DOM操作, 修改了对象中的护具,页面会自动渲染
  • Vue的底层使用了一种叫虚拟DOM的技术, 能够实时监听js对象的属性变化,从而自动更新页面DOM元素, 虚拟DOM本质上就是一个js对象.
原始的前端开发Vue.js的前端开发
1.使用HTML+CSS搭建页面1.使用HTML+CSS搭建页面
2.使用异步请求技术向后台请求数据2.使用异步请求技术向后台请求数据
3.使用原生的js或者jQuery操作DOM,渲染数据3.Vue自动渲染数据

2-组件化开发(盒子复用)

组件化开发: 网页中的某一部分,可能需要在多个地方被重复使用, 就可以定义成一个组件.
前端组件: 就是组成页面内容的零件,它是HTML结构和CSS样式的综合体.

组件化开发的好处:

  1. 一次定义,多出使用
  2. 便于开发维护
    • 类似于之前的函数封装解决代码冗余问题. Vue.js可以把网页的某一部分(HTML+CSS+JS)封装成一个组件.

vue采用的是MVVM设计模式

即：通过数据双向绑定让数据自动地双向同步 不再需要操作DOM

  • V(修改视图) -> M(数据自动同步)
  • M(修改数据) -> V(视图自动同步)

书归正传,我们开始讲一下Vue相关指令

什么是指令

在 vue 中提供了些对页面和数据更方便的输出方式，实质上就是特殊的 html 标签属性，指令中封装了一些DOM行为, 结合属性名作为一个行为, 行为有对应的值,根据不同的值，框架会进行相关DOM操作的绑定.
特点: v- 开头

1.插值表达式 {{}}

在dom标签中直接插入内容, 又叫声明式渲染/文本插值

  • 语法: {{表达式}}
  • 作用：用于给 标签中间的内容 写入 变量的值 表达式(可以计算得到一个结果)中出现的变量一定要在data里声明.

2. v-bind

  • 作用：用于和 html 标签的属性绑定
  • 语法: <标签名 v-bind:属性名="Vue的变量">
  • 简写:<标签名:属性名="Vue的变量">
  <div>
    <!-- v-bind 语法 -->
    <!-- v-bind:标签的属性名="Vue的变量" -->
    <!-- 简写的语法： :标签的属性名="Vue的变量" -->
    <!-- v-bind 属性绑定 作用就是和 html 标签的属性 绑定到一起 ，可以使用 Vue 里面的变量 -->
    <a v-bind:href="url">百度</a>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: "http://www.baidu.com",
      msg: "战三",
    };
  },
};
</script>

3. v-on

  • 作用：用于给标签绑定事件
  • 语法:
    v-on:事件名='要执行的代码(少量)'
    v-on:事件名='methods方法中的函数'
    v-on:事件名='methods方法中的函数(实参)'
  • 简写: @事件名='methods函数'
<template>
  <div>
    <p>商品的输入：{{ count }} </p>
    <!-- 给按钮绑定事件 v-on -->
    <!-- v-on:事件名="Vue的变量" -->
    <!-- 在 html 标签里面 访问 Vue 里面的变量不需要加 this 关键字  -->
    <button v-on:click="count++">+1</button>
    <!-- v-on:事件名="methods里面的函数" -->
    <button v-on:mouseenter="add">+2</button>
    <!-- v-on:事件名="methods里面的函数" -->
    <button v-on:mouseenter="addN(10)">+N</button>
    <!-- v-on: 可以简写为 @事件名='函数' -->
    <button @click="subFn(1)">-1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      // console.log(1)
      // 注意：在函数里面想要访问 Vue 中变量 必须加 this.变量名
      this.count += 2
    },
    addN(val) {
      // console.log(val)
      this.count += val
    },
    subFn(val) {
      this.count -= val
    }
  }
}
</script>

v-on获取事件对象

  • 语法:
    没有传参的时候,通过形参直接接收
    传参的时候,通过$event来传递事件对象
<template>
  <div>
    <!-- 获取事件对象 1. 调用函数时 没有传递参数 只需要在 定义函数处 准备一个 形参 -->
    <button @click="fn">按钮</button>
    <!-- 2. 调用函数 时 传递给 实际参数 需要使用固定的实际参数 $event -->
    <button @click="fnn(10,$event)">获取事件对象</button>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'http://www.baidu.com'
    }
  },
  methods: {
    fn(e) {
      console.log(e)
    },
    fnn(val,e) {
      console.log(val, e)
    }
  }
}
</script>

v-on事件修饰符

在事件后面.修饰符名 可以给事件带来其他功能

  • 语法:
    @事件名.修饰符='methods函数'
    .stop--组织事件冒泡
    .prevent--组织默认行为
    .once--程序运行期间, 只触发一次事件处理函数
<template>
  <div @click="fclick">
    <!-- 获取事件对象 1. 调用函数时 没有传递参数 只需要在 定义函数处 准备一个 形参 -->
    <button @click="fn">按钮</button>
    <button @click.once="once">一次就好</button>
    <!-- 2. 调用函数 时 传递给 实际参数 需要使用固定的实际参数 $event -->
    <button @click.stop="fnn(10, $event)">获取事件对象</button>
    <a :href="url" @click="one">百度</a>
    <br />

    <a :href="url" @click.prevent.stop>百度</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: "http://www.baidu.com",
    };
  },
  methods: {
    fn(e) {
      console.log(e);
    },
    fnn(val, e) {
      console.log(val, e);
    },
    one(e) {
      e.preventDefault();
    },
    fclick() {
      console.log("想家啦");
    },
    once() {
      console.log("好好学习");
    },
  },
};
</script>

v-on按键修饰符

  • 语法:
    @keyup.enter -- 监测回车按键
    @keyup.esc -- 监测退出按键
<template>
  <div>
    <!-- 按键修饰符 -->
    <!-- 语法 @事件名.enter 回车  -->
    <!-- 语法 @事件名.esc 取消  -->
    <!-- 语法 @keydown.97 -->
    <input type="text" @keydown.enter="fn">
    <input type="text" @keydown.esc="fn">
    <input type="text" @keydown.65="fn">
  </div>
</template>

<script>
export default {
  methods: {
    fn() {
      console.log('按下回车了')
    }
  }
}
</script>

4. v-model

  • 作用: 双向数据绑定，数据变化与视图同步，视图变化与数据同步
  • 语法: v-model='vue的变量名'
  • select标签: v-model绑定select 标签, 获取的是 option标签的 value属性值
  • checkbox:
    v-model绑定复选框, 如果变量的值是 非数组 , 则得到 checked属性值(true or false)
    如果变量的值是 数组 , 则得到 value属性值
  • radio: v-model绑定单选框, 则得到 value属性值
<template>
  <div>
    <!-- select 标签使用 v-model 绑定 需要给 select 标签加 得到是 value属性值 -->
    来自于：<select v-model="city">
      <option value="1">北京</option>
      <option value="2">上海</option>
      <option value="3">广州</option>
      <option value="4">深圳</option>
      <option value="5">武汉</option>
    </select>
    <br />

    <!-- v-model 绑定在 CheckBox 身上  变量的值 是一个 字符串  获取的 复选框的 checked 属性值 -->

    <!-- v-model 绑定在 CheckBox 身上  变量的值 是数组 则得到 value属性 -->
    <!-- v-model 绑定在 CheckBox 身上  变量的值 非数组 则得到 checked属性得值 -->

    爱好：<input type="checkbox" v-model="hobby" value="看书" /> 看书
    <input type="checkbox" v-model="hobby" value="听音乐" /> 听音乐
    <input type="checkbox" v-model="hobby" value="睡觉" /> 睡觉
    <br />
    <!-- 单选框 v-model 得到就是 value 属性值 -->
    性别：<input type="radio" name="gender" v-model="gender" value="男" /> 男
    <input type="radio" name="gender" v-model="gender" value="女" /> 女 <br />
    个人介绍：
    <textarea v-model="info"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: "2",
      // hobby: ''
      hobby: ["看书", "听音乐"],
      gender: "男",
      info: "",
    };
  },
};
</script>

v-model修饰符
v-model.修饰符 = 'vue数据变量'

  • .number 以parseFloat转成数字类型(-转成数值类型后再赋予给Vue数据变量)
  • .trim 去除首尾空白字符(-去除两边空格后把值赋予给Vue数据变量)
  • .lazy 在change时触发而非input时(- 等表单失去焦点，才把值赋予给Vue数据变量)

5. v-text 和 v-html

  • 语法:
    v-text='vue数据变量' 不能解析 html 标签
    v-html='vue数据变量' 可以解析 html 标签
  • 注意: v-text 与 v-html 指令, 会替换整个InnerText,会覆盖原来的文本.
template>
  <div>
    <!-- v-html 解析 html标签 -->
    <p v-html="html"></p>
    <!-- v-text 不能解析 html 标签 -->
    <p v-text="html"></p>
    <!-- Vue 官方 建议 少用 v-html -->
    <p v-text="html">{{ msg }}</p>
    <!-- 注意： v-text 与 v-html 指令 会覆盖 插值表达式 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      html: '<strong>hello</strong>',
      msg: 'hello'
    }
  }
}
</script>

6. v-show

  • 作用: 让元素显示或隐藏 本质上是通过css的 display:none 属性隐藏(频繁切换显示和隐藏)
  • 语法: v-show='vue变量' 变量的值为true or false

7. v-if

  • 作用: 让元素显示或隐藏 本质上是让元素在 dom 树上面 移除或者创建
  • 语法:
    v-if='vue变量 ' 变量的值为true or false
    v-if 还可以配合 v-else v-else-if 来使用
<template>
  <div>
    <!-- v-show 让 元素显示或者隐藏 Vue 变量的值 如果是 true 就代表显示  为 false 就是隐藏 通过 css 的 display 属性 显示或者隐藏  -->
    <h1 v-show="isShow">是否显示</h1>
    <!-- v-if 也可以让元素显示或者隐藏   如果变量的为 false 就会将这个元素 直接从 DOM 树上面移除   -->
    <div v-if="isShow">我是一个大盒子</div>
    <!-- v-if  还可以配合 v-else v-else-if 来使用 -->
    <div v-if=" age > 16">有钱就回家过年</div>
    <div v-else>没钱就回家写代码</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      age: 19
    }
  }
}
</script>

8. v-for

  • 作用: 渲染列表, 按照数据循环生成所在标签的结构
  • 语法:
    v-for='(值变量, 索引的变量) in 目标数据'
    :key='id 或下标'
    v-for='值 in 目标数据'
  • 目标数据: 可以遍历数组 / 对象 / 数字 / 字符串
  • 注意: :key 一定要加, 有id(不一定是id, 只要这个属性能区分每个数据就可以) 绑定对象的id属性, 没id 绑定数组的下标
<template>
  <div>
    <ul>
      <!-- item 代表数组的 元素  -->
      <!-- index 代表数组的 下标 -->
      <!-- 遍历数组 -->
      <!-- 说明：:key 一定要加  没id 有索引 绑定数组的下标  -->
      <!-- <li v-for="(item,index) in list" :key="index">
        {{ item }} --- {{ index }}
      </li> -->
      <!-- <li v-for="item in list">
        {{ item }}
      </li> -->
      <!-- 说明：:key 一定要加  有id 绑定对象的id属性  -->
      <!-- 遍历对象 -->
      <li v-for="item in list" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // list: ['马超','关羽','赵云','虞姬']
      list: [
        { id: 1, name: "陈平安" },
        { id: 2, name: "宁姚" },
        { id: 3, name: "阮秀" },
        { id: 4, name: "裴钱" },
        { id: 5, name: "小米粒" },
        { id: 6, name: "暖树" },
        { id: 7, name: "景清" },
        { id: 8, name: "小宝瓶" },
        { id: 9, name: "齐先生" },
      ],
      num: 10,
    };
  },
};
</script>

祝君能好好学习技术, 努力挣钱, 孝顺父母!

avatar
文章
阅读
粉丝