当前位置：首页 > news >正文

vue脚手架的基础搭建过程

news 2026/2/11 16:24:03

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/cli

VueCLI项目很大，文件很多，大多数都在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}}  &nbsp;&nbsp;|&nbsp;&nbsp;名称：{{item.name}} &nbsp;&nbsp;|&nbsp;&nbsp;上映时间：{{item.showingon}} &nbsp;&nbsp;|&nbsp;&nbsp;时长：{{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不能重复，否则控制台报错。