VUE2 脚手架搭建

VUE

---

---

1.MVVM架构

M：Model 模型层（业务逻辑层）主要包含JS代码，用于管理业务逻辑的实现
V：View 视图层 主要包含HTML/CSS代码，用于管理UI的展示
VM：ViewModel （视图模型层）用于将data与视图层的Dom进行动态绑定

---

2.基于脚手架环境开发Vue项目

①脚手架环境安装

制作web项目，从小作坊状态转向工程化开发的状态就需要了解Vue脚手架环境。
脚手架开发环境将会提供一套开发标准便于工程化快速开发。
基于脚手架环境就可以生成标准化开发时所需要的项目包。
官方文档：Vue Cli官方文档

环境要求：
1、node版本：12~16
查看版本：node -v
2、npm，包管理工具，需要配置仓库镜像地址，改为中国仓库镜像地址。
查看当前镜像地址：npm get registry
设置镜像地址的命令：
npm set registry https://registry.npmmirror.com/ (淘宝)
npm set registry https://mirrors.huaweicloud.com/repository/npm/ (华为)

基于npm命令，全局安装脚手架工具，这样就可以通过该工具创建vue项目了
npm i -g @vue/cli
常见错误：mac系统权限不足，命令前加sudo 密码 提权；network相关错误，检查镜像地址更换网络

安装成功后 重启cmd窗口(重置环境变量) 查看版本：vue --version

②创建项目包

注意：
1、在哪一个文件夹中执行vue命令创建项目，生成的项目就会出现在哪一个文件
2、创建项目所在文件目录不要有中文和特殊字符
3、创建项目的目录中，不要有vue.js

D:\Web\VUE\Day02
vue create 自定义的项目文件夹名称
例如：vue create vue-pro

VueCli 将会让我们选择创建项目时的相关配置



后面的选项全部回车即可

进入项目目录执行npm run serve即可启动项目

③脚手架项目包的使用

使用 单独vscode窗口 直接打开vue-pro文件夹
vue2推荐安装两个插件Vetur / Vue VSCode Snippets

脚手架运行过程：
脚手架启动时，将会打开public/index.html，并在该网页中允许main.js，将会创建vue对象，通过vue对象来管理index.html中的 #app 内容的显示。初始化状态下，默认将App.vue组件中的内容渲染到 #app 中，从而看到页面效果。
所以研究 .vue 文件的写法即可搞定各种在脚手架中开发vue项目的细节

template 部分用于定义当前组件的页面结构。定义的这些页面结构，最终将会被挂载在 #app 中 。
注意：template中的内容又且仅有一个根目录

script 部分用于定义当前组件的js脚本。通过ES6的export default语法将当前组件中定义的js对象到处到外部供vue进行后续处理

style 部分用于定义当前组件中标签的css样式

lang：语言 需要在创建项目时选择 css pre-processors ，此处才可用

scoped：作用域。含有该属性的style中定义的css样式，仅当前组件生效

---

3. 脚手架基础结构示例

绑定属性和事件在脚手架中的写法

<template>
  <div>
    <img width="400px" :src="`/img/${n}.jpg`" alt="" />
    <br>
    <button @click="n == 1 ? n = 4 : n--">上一张</button>
    <button @click="n == 4 ? n = 1 : n++">下一张</button>
    <h3>{{ moviename }}</h3>
    <div>电影时长：{{ m }}分钟</div>
    <button @click="next">换一部</button>
  </div>
</template>

<script>
export default {
  // 脚手架项目中 data必须已函数的方式导出，返回一个数据对象
  // 返回的数据对象将会直接混入到vue对象中，成为vue对象的属性
  // 为什么不直接用对象，而是用方法返回对象？
  // 原因：同一个组件在未来场景下复用时，需要做到防止属性的混乱
  data() {
    return {
      moviename: '三体Ⅰ',
      m: 111,
      n: 1,
    }
  },
  methods: {
    // 定义函数
    next() {
      this.moviename = '三体Ⅱ'
      this.m = '222'
      this.n = this.n == 4 ? 1 : this.n + 1
    },
  },
}
</script>

<style lang="scss" scoped></style>

---

4.Vue的常用指令

v-show ：控制组件的显示与隐藏
v-on ：绑定事件
v-bind ：动态绑定属性
v-text ：为元素设置内容文本 和{{text}}效果差不多 (类似dom.innerText)
v-html ：将文本当作html代码解析后显示在元素中
v-pre ：不会将 {{ }} 当作 vue 语法解析

<template>
  <div>
    <!-- 测试vue的常用指令 -->
    <p>{{ text }}</p>
    <p v-text="text"></p>
    <p v-html="text"></p>
    <!-- {{}}：是vue的语法，vue将会对其解析，编译 -->
    <p>{{ 8 + 8 }}</p>
    <!-- v-pre指令：不解析vue的花括号 -->
    <p v-pre>{{ 8 + 8 }}</p>
    <p v-text="`{{8+8}}`"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: `<span style="color:red">
      最近有什么新闻？郑州富士康...韩国梨泰院...
      </span>`,
    }
  },
}
</script>

<style lang="scss" scoped></style>

v-for ：用于循环输出当前元素

    <p v-for="n in 10">文本...文本</p>
    
    <p class="item" v-for="(m, i) in movies" :key="i">{{ m }} - {{ i }}</p>
    
    <script>
    // 等价于
    for (n == 1; n < 10; n++) { dom.append(`<p>文本...文本</p>`) }
    
	for (let i = 0; i < movies.length; i++) {
	  let m = movies[i]
	  dom.append(`<p>${m} - ${i}</p>`)
	}
    </script>

v-for 指令更多用法

<template>
  <div>
    <!-- v-for指令的基础用法 -->

    <!-- 循环打印n次，并在后面拼接遍历的n -->
    <!-- v-for指令中，使用in与of没有区别 -->
    <p v-for="n in 3" :key="n">段落in...{{ n }}</p>
    <p v-for="n of 5" :key="n">段落for...{{ n }}</p>

    <!-- 遍历数组 -->
    <p>图图喜欢的电影：</p>
    <p class="item" v-for="ikun in movies" :key="ikun">{{ ikun }}</p>

    <!-- 遍历过程中，同时访问元素及其对应下标 -->
    <p>图图喜欢的电影：</p>
    <p class="item" v-for="(m, i) in movies" :key="i">{{ m }} - {{ i }}</p>

    <!-- 访问对象数组 -->
    <div class="food-item" v-for="(item, i) in foods" :key="i">
      <div style="width: 20%">ID：{{item.id}}</div>
      <div style="width: 20%">名称：{{item.name}}</div>
      <div style="width: 20%">￥{{item.price}}</div>
      <div style="width: 20%">×{{item.num}}</div>
      <div style="width: 20%">商品小计：￥{{ item.price * item.num }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      foods: [
        { id: 1001, name: '🍖', price: '20', num: 5 },
        { id: 1002, name: '🥩', price: '30', num: 3 },
        { id: 1003, name: '🍠', price: '40', num: 4 },
        { id: 1004, name: '🧁', price: '50', num: 1 },
        { id: 1005, name: '🍗', price: '60', num: 2 },
      ],
      movies: ['三体Ⅰ', '三体Ⅱ', '三体Ⅲ', '三体Ⅳ', '三体Ⅴ'],
    }
  },
}
</script>

<style lang="scss" scoped>
.item {
  margin-left: 10px;
  display: inline-block;
  padding: 5px 10px;
  background-color: green;
  color: white;
}
.food-item {
  width: 750px;
  display: flex;
  height: 30px;
  align-items: center;
  border: 1px solid gray;
  margin: 5px;
}
</style>

---

总结

注意复习：脚手架环境安装，脚手架基础结构，Vue的常用指令(v-for)