vue脚手架的基础搭建过程
MVVM架构
Vue框架底层设计遵循MVVM架构。
Model层（M）模型层（业务逻辑层）
View层（V）视图层 主管UI
ViewModel层（VM）
将项目代码划分清晰的层次结构后，非常有利于后期代码功能维护。如果需要修改ui，则只需要修改view层代码；如果需要修改业务逻辑，则只需要修改model层代码。
基于脚手架的环境开发vue项目
开发vue项目的方式主要有两种：
-
基于vue.js：在html中引入vue.js，让vue.js管理页面的
div#app元素。 -
基于脚手架环境：通过vue脚手架环境可以方便的创建一个通用的vue项目框架模板，在此基础之上开发vue向更加便捷。适合工程化开发。
vue脚手架工具：VueCLI、Vite。
VueCLI提供了简单的创建项目包、vue项目开发模式。需要安装VueCLI。
npm config get registry # 查看npm源
npm set registry https://registry.npmmirror.com # 设置国内npm镜像源
npm install -g @vue/cliVueCLI项目很大，文件很多，大多数都在node_modules中，所以以后传代码不会带着node_modules，大家下载了项目后由于缺少依赖模块，项目跑不起来的。如果需要运行项目，则应该在项目目录下执行命令：npm install。将会默认读取package.json，下载所需要的依赖包，就可以正常跑项目了。npm run serve。
脚手架的运行过程： 当脚手架启动时，将会打开 public/index.html ，并且在该网页中运行 main.js ，将会创建 Vue 对象，通过 Vue 对象来管理 index.html 中的 #app 内容的显示。初始化状态下，默认将 App.vue 组件中的内容渲染到 #app 中，从而看到页面效果。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')在VueCLI项目中，所有的资源都会显示在div#app中。 在此过程中就需要实现根据不同的请求资源路径，显示不同的页面内容。这个功能由VueRouter脚手架的路由系统来管理。
脚手架路由系统（VueRouter）的设计与应用
平时在开发项目的过程中，需要访问不同的路径来看到不同的页面内容，在脚手架项目中，由VueRouter来管理项目的路由系统。 实现：访问不同的路由地址，看到不同的页面。
案例：写一个页面：首页，该页面只有首页两个字。访问：http://localhost:8080/index时，看到该页面。
实现思路：
-
先准备好一个vue组件：
views/Index.vue。写好内容。 -
手动配置路由，使得当访问：/index时，看到该组件。
-
测试路由地址即可。http://localhost:8080/index
案例：写个登录页面：账号密码两个输入框，一个提交按钮。要求访问地址：
http://localhost:8080/login 时，看到该登录页面。
案例：写个注册页面：账号、密码、确认密码、手机号，一个提交按钮。要求访问地址：
http://localhost:8080/register时，看到该注册页面。
Vue文件的语法
在脚手架项目中，每一个vue文件都成为是一个组件。一个组件封装了页面中的局部内容（包括局部内容的html结构、局部内容的css样式、局部内容的js功能）。这样就需要研究一下.vue文件的语法。
.vue文件的基础结构
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>template部分用于定义当前组件的页面结构。
注意：template中的内容有且仅有一个根元素。
script部分用于定义当前组件的js脚本。
注意：可以在script中通过data来定义响应式变量，通过methods定义方法。
style部分用于定义当前组件的css样式。
在style标签中可以添加scoped属性，一旦style标签上有scoped属性，则在此style段中定义的样式，仅仅针对当前组件的生效（原理是当前组件的每一个元素都会生成一个属性，然后vue将在style中定义的选择器改为使用属性选择器，仅仅选择当前组件内的元素）。如果没有scoped属性，则样式一旦加载，全局生效。
Vue的常用指令
-
v-on 绑定事件
-
v-bind 动态绑定属性
-
v-show 设置元素显示或隐藏 display:none
-
v-if v-else-if v-else 判断元素是否输出
-
v-html v-pre v-text
-
v-for
案例：编写一个组件页面：views/Directive.vue 当访问：/directive时，看到它。
v-for指令的用法
v-for指令用于重复输出当前元素。
案例：写一个新的组件页面：For.vue 当访问： /for时看到它。
场景1
遍历字符串数组输出每一个列表项元素：
data: {
nav: ['京东超市','京东家电','秒杀','拍卖','京东生鲜','PLUS会员']
}
<ul>
<li v-for="item in nav">{{item}}</li>
</ul>上述写法，类似于：
for(let i=0; i<nav.length; i++){
let item = nav[i]
输出 `<li> ${item} </li>`
}场景2
遍历对象数组输出每一个列表项元素：
data: {
movies: [
{id:1, name:'交换余生', showingon:'2021-10-10', duration:124},
{id:2, name:'杀手', showingon:'2022-10-09', duration:114},
{id:3, name:'功夫', showingon:'2023-1-10', duration:194},
{id:4, name:'功夫熊猫', showingon:'2011-05-10', duration:141}
]
}
<div>
<div v-for="item in movies" :key="item.id">
ID：{{item.id}} |
名称：{{item.name}} |
上映时间：{{item.showingon}} |
时长：{{item.duration}}分钟
</div>
</div>拓展1
在使用v-for遍历输出数组数据的同时，引用数组的下标：
<div v-for="(item,i) in movies" :key="item.id">
..{{i}} 下标
</div>拓展2
纯粹的按照数量重复输出元素：
<div v-for="item in 100" :key="item">内容</div>:key的作用
v-for指令一般都需要配一个v-bind:key（简写 :key）来为每一个列表项设置一个唯一标识符（简单理解为每一个item一个名字）。目的是为了提高列表更新时的DOM渲染性能。如果列表中已经包含很多列表项了，后续由于列表数据的变化需要重新渲染列表时，将会通过:key属性来检测当前需要渲染的列表项是否已经渲染过（比较列表项的key在原始列表中是否已经存在），如果已经渲染过，就不会重新创建DOM了。
那么一般将什么设置为:key的值？
<div v-for="(item,i) in list" :key="item.id"></div> id是唯一属性
<div v-for="(item,i) in list" :key="i"></div> 下标 但不建议:key的数据类型只能是number和string，不能是对象。同一个列表中的列表项的key不能重复，否则控制台报错。