Vue_day02

Vue DAY02

MVVM架构

M：Model 模型层（业务逻辑层） 主要包含JS代码，用于管理业务逻辑的实现。

V： View 视图层 主要包含 HTML/CSS代码，用于管理UI的展示。

VM：ViewModel （视图模型层）用于将data与视图层的DOM进行动态绑定。

基于脚手架环境开发vue项目

制作web项目，从小作坊状态转向工程化开发的状态就需要了解Vue脚手架环境。脚手架开发环境将会提供一套开发标准便于工程化快速开发。

基于脚手架环境就可以生成标准化开发时所需要的项目包。

环境要求：

1. node版本： 12~16

   检查node版本的命令： node -v

   

   安装nodejs：https://nodejs.cn/download/

2. npm，包管理工具，需要配置仓库镜像地址，改为中国仓库镜像地址。

   执行命令查看当前镜像：npm get registry

   设置镜像地址的命令：

   # 旧版淘宝镜像 （不推荐使用）
   npm  set registry  https://registry.npm.taobao.org/
   # 设置最新的国内淘宝镜像地址
   npm  set registry https://registry.npmmirror.com/
   # 设置华为镜像地址
   npm set registry https://mirrors.huaweicloud.com/repository/npm/
   

   基于npm命令，全局安装脚手架工具，这样就可以通过该工具创建vue项目了。

   #  命令名称   安装    全局     安装包的名字
       npm      i       -g     @vue/cli
       npm    install   -g     @vue/cli
   #  如果是mac系统，需要提权
       sudo npm i -g @vue/cli   #输入密码即可 
   

   如果看到如下界面，则表示安装成功：

   

   只要没有红色日志：ERROR 都算成功。

   安装成功之后，将所有的cmd窗口都关闭，（重置系统环境变量），通过vue命令来查看vuecli的安装版本：

   vue --version
   

   

   至此就可以通过vue命令生成项目包了。

   安装时常见错误：

   

   network相关错误，属于网络错误。

生成项目包

安装脚手架后，可以通过vue命令创建完整的项目包，该项目包中将会自动创建项目所需要的基本资源及基础目录结构。

注意：

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

找一个干净地方执行命令：

# cd D:/code/VUE/day02/demo/
vue create  自定义的项目文件夹名称
# 例如：
vue create vue-pro

vueCli将会让选择创建项目时的相关配置

后续选项全部回车即可：

后续将会安装下载整个vue脚手架项目，安装完毕后：

当前脚手架项目已经创建完毕。该脚手架项目内部自带一个web服务器，需要执行一条命令：npm run serve即可启动服务器。根据上述提示的命令，进入项目目录中，执行该命令即可启动项目：

npm run serve

这一条命令，将会加载当前目录下的package.json，根据相关配置，启动web服务器，启动成功后，将会占用8080端口，打开浏览器，访问地址：

http://localhost:8080

即可看到脚手架为我们创建的首页。

脚手架项目包的使用

项目包中已经设计好相关的目录结构，推荐使用单独的vscode窗口来打开该项目，（直接打开项目目录，不要打开父目录）

注意事项，要使用vscode直接打开项目根目录，这样才可以使用vscode提供的一系列功能进行开发。

插件：

脚手架项目的基础目录结构

打开src：

脚手架的运行过程：

当脚手架启动时，将会打开public/index.html，并且在该网页中运行main.js，将会创建Vue对象，通过Vue对象来管理 index.html中的#app内容的显示。初始化状态下，默认将App.vue组件中的内容渲染到#app中，从而看到页面效果。

所以要研究.vue文件的写法即可搞定各种在脚手架中开发vue项目的细节。

<template>
  <div>
    <h3>电影名称</h3>
    <div>电影时长：117分钟</div>
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>

</style>

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

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

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

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

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

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

Vue的常用指令

1. v-show 控制组件的显示与隐藏
2. v-on 绑定事件
3. v-bind 动态绑定属性
4. v-text 为元素设置内容文本。类似dom.innerText。
5. v-html 将文本当做html代码解析后显示在元素中。
6. v-pre 不会将{{}}当做vue语法进行解析。
7. v-for 循环输出当前元素。

v-for的使用

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

<p v-for="n in 10">文本....文本{{n}} {{n}} {{n}}</p>

上述代码约等于：

for(n=1; n<=10; n++){
    随意的使用n变量
    dom.append(`<p>文本....文本....${n}</p>`)
}

还可以在遍历的过程中，同时访问数组中的元素与元素对应的下标：

<p class="item" v-for="(m, i) in movies" :key="i">{{m}}</p>

上述代码约等于：

for(i=0; i<movies.length; i++){
    let m = movies[i]
    dom.append(`<p>${m}</p>`)
}