Vue
- 一、配置环境
-
- [1.1 安装node.js](#1.1 安装node.js)
-
- [1.1.1 node.js 下载](#1.1.1 node.js 下载)
- [1.1.2 node.js 安装](#1.1.2 node.js 安装)
- [1.1.3 node.js 配置](#1.1.3 node.js 配置)
- [1.2 安装VSCode](#1.2 安装VSCode)
-
- [1.2.1 VSCode 下载](#1.2.1 VSCode 下载)
- [1.2.2 VSCode 安装](#1.2.2 VSCode 安装)
- [1.2.3 VSCode 配置](#1.2.3 VSCode 配置)
- 二、创建Vue项目
-
- [2.1 使用命令行创建Vue项目](#2.1 使用命令行创建Vue项目)
- [2.2 使用VSCode运行Vue项目](#2.2 使用VSCode运行Vue项目)
- [2.3 尝试编写Vue项目](#2.3 尝试编写Vue项目)
-
- [2.3.1 准备工作](#2.3.1 准备工作)
- [2.3.2 完成一个小任务](#2.3.2 完成一个小任务)
- [2.3.3 额外练习](#2.3.3 额外练习)
- [2.3.4 加个班,再写一个任务](#2.3.4 加个班,再写一个任务)
- [2.4 Vue 3 启动!](#2.4 Vue 3 启动!)
-
- [2.4.1 Vue 2 升级为Vue 3](#2.4.1 Vue 2 升级为Vue 3)
- [2.4.2 小小改进](#2.4.2 小小改进)
- [2.4.3 响应吧!对象与对象数组](#2.4.3 响应吧!对象与对象数组)
一、配置环境
1.1 安装node.js
1.1.1 node.js 下载
点击上面链接,即可访问node.js的官网,如下图:

点击绿色按钮,下载node.js的安装程序。
1.1.2 node.js 安装
下载完成后,打开安装程序,会弹出以下面界面,【我下载的版本是node-v20.11.1-x64,建议版本高于10以上】

点击Next,弹出用户协议界面(经典我不清楚但同意)

先勾选同意,然后再点击Next,弹出安装路径界面,

默认是C盘,我的选择是把C盘改为D盘,其他文件路径不变,安装路径要自己可以找的到。
确定完安装路径,点击Next,弹出安装结构界面,

直接点击Next,弹出下面界面,询问要不要自动安装必须的工具。

不勾选,直接点击Next,弹出点击安装界面,

点击Install,弹出正在安装界面

安装结束后点击Finish即可,到此为止,node.js算是安装成功了。

安装完成后,根据自己的安装路径,找到node.js的安装位置。

在该位置,新建node_cache
和node_global
两个文件夹。
1.1.3 node.js 配置
点击电脑中心或者我的电脑,
进入电脑中心后,鼠标右击空白处,弹出以下界面。

点击属性,进入以下界面

点击高级系统设置,进入下面界面

点击环境变量,进入下面界面

在用户变量的框中下滑,找到Path变量,双击Path变量,弹出下面界面

点击新建,将下面路径输入进去,
powershell
D:\Program Files\nodejs\node_global
其中D:\Program Files\nodejs
是你的node.js的安装路径,node_global
是前面在安装步骤新建的文件夹。
如果node.js的安装路径与我选择的不一样,请将路径替换为自己的node.js的安装路径。

输入完后点击确定,一定要点击确定,点击取消和右上角的x都是相当于没有做以上步骤。
点击确定后,会退回到以下界面。

点击系统变量下面的新建,弹出下面界面

变量名输入:NODE_PATH
变量值输入:D:\Program Files\nodejs\node_modules
其中,D:\Program Files\nodejs
是你的node.js的安装路径,node_modules
是node.js中的文件夹。
如果node.js的安装路径与我选择的不一样,请将路径替换为自己的node.js的安装路径。

输入完后点击确定,一定要点击确定,点击取消和右上角的x都是相当于没有做以上步骤。
点击确定后,会退回到以下界面。

检查一下系统变量是否有前面输入的,如果有,那就点击确定;
如果没有那就是上一步不是点击确定退出来的,而是点击取消或右上角的x退出来的,这种情况重新做上一步即可。
点击确定后,会退回的一下界面

再次点击确定,环境变量就配置完成了。
接下来,键盘按下Win+R,【Win键就是键盘左下角window图标的那个按键】打开运行界面

输入cmd,点击确定,进入命令行界面。

输入node,按下回车,弹出以下界面,则表示node.js安装成功!

如果没有,则表示安装失败,建议重新按照上面步骤检查一遍,尤其是配置环境变量步骤,看看是不是哪里漏了或者输错了安装路径。
1.2 安装VSCode
1.2.1 VSCode 下载
点击上面链接,即可访问VSCode的官网,如下图:

点击Download for Window,下载VSCode。

1.2.2 VSCode 安装
下载完后安装即可,安装过程点击下一步,我同意之类的即可,没有什么特别的。
1.2.3 VSCode 配置
安装完成后打开VSCode,如果觉得字体小,可以按ctrl和+键,可以放大字体,相反,ctrl和-键可以缩小字体。

点击该按钮,进入扩展工具下载界面

在搜索框里输入TypeScript Vue Plugin
,点击安装【Install】,安装成功后会显示下面界面

然后在搜索框输入Vue - Official
,点击安装【Install】,安装成功后会显示下面界面。

到此准备工作都结束了。
二、创建Vue项目
2.1 使用命令行创建Vue项目
在D盘创建一个文件夹,用于存放Vue项目,文件夹命名随意,路径不宜太深。

进入新建的文件夹,在路径处输入cmd,按下回车,进入命令行界面。

在命令行界面输入 npm config set registry https://registry.npm.taobao.org/
,按下回车
【npm是node.js下载时一起下载的包管理工具,用来下载node.js的扩展包。】

接着输入 npm init vue@latest
,按下回车。
【该命令表示要创建一个Vue项目工程,该命令会根据Vue自己的工程模板,调用Vue的工程创建工具Vite创建一个工程模板。】
等待一段时间,此时可能会报下面错误。

这时输入 npm config set strict-ssl false
,来关闭npm的SSL验证。

关闭后再次输入 npm init vue@latest
,按下回车

按下y,则开始下载。

等待一段时间,下载结束后,就开始创建项目【如果没有反应,可以按一下回车】

项目名默认为vue-project,直接按下回车

询问是否使用TS语法,选择是。
接下来所有选择都选择否和不需要

所有选择都选择结束后,项目就创建成功,会显示下面界面。

此时输入cd vue-project
,进入vue-project文件夹。

输入 npm install
,就会自动下载项目所需要的扩展包了。

等待一段时间,下载结束后会显示下面界面。

此时可以打开前面新建的用于存放Vue项目的文件夹,发现里面多了一个vue-project的文件夹,这个文件夹就是我们建立的Vue项目

文件夹内部情况如下图:

2.2 使用VSCode运行Vue项目
打开VSCode,点击打开文件夹

选择前面建立的Vue项目,

选择后,就可以看见前面创建的Vue项目的项目结构

点击终端【英文模式下是 Terminal 】,点击新建终端

在终端输入 npm run dev
,按下回车

按住ctrl,鼠标点击连接

弹出下面界面,则表示Vue项目没有问题

2.3 尝试编写Vue项目
2.3.1 准备工作
鼠标右击src文件夹,点击删除,将src文件夹删除。【为了方便了解Vue项目,所以先删除src文件夹,然后手动编写src文件夹里面的文件】

右击空白地方,选择新建文件夹

新建一个文件夹,命名为src

在src文件夹下,新建main.ts和APP.vue两个文件,在建立components文件夹
【main.ts是用于写ts脚本,APP.vue是vue程序的主文件,components文件夹用于存放其他Vue组件】

2.3.2 完成一个小任务
任务 | 显示学生信息 |
---|---|
描述 | 显示学生的姓名,年龄,点击按钮可以修改学生的姓名、年龄和联系方式 |
项目结构

代码如下:
main.ts 代码
typescript
import { createApp } from "vue";
import App from './App.vue'
createApp(App).mount('#app');
APP.vue 代码
html
<template>
<div class="app">
<h1>Hello Vue !</h1>
<Student/>
</div>
</template>
<script lang="ts">
// 把Student.vue导入
import Student from './components/Student.vue';
// 使用Student就定义export
export default{
name:'App',
components:{Student}
}
</script>
<style>
.app{
background-color: aqua;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
Student.vue 代码
html
<template>
<div class="student">
<h2>姓名:{{ name }}</h2>
<h2>年龄:{{ age }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">显式联系方式</button>
</div>
</template>
<style scoped>
.student{
background-color: blueviolet;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
<script lang="ts">
export default{
name:'student',
data() {
return{
name:'张三三',
age:18,
tel:'1008611'
}
},
methods:{
changeAge(){
this.age+=1;
},
changeName(){
this.name='李四四';
},
showTel(){
alert(this.tel);
},
}
}
</script>
运行方式如下:
新建Terminal(终端),输入代码:npm run dev

ctrl+鼠标单击链接

运行结果如下:

2.3.3 额外练习
任务 | 显示学校信息 |
---|---|
描述 | 显示学校的名字,班级数量,所在地址,老师的数量、学生数量 |
在components文件夹下新建一个School.vue 文件,按照任务描述编写代码
html
<template>
<div class="school">
<h2>名字:{{ name }}</h2>
<h2>班级数量:{{ count }}</h2>
<h2>所在地址:{{ addr }}</h2>
<h2>老师数量:{{ t_count }}</h2>
<h2>学生数量:{{ s_count }}</h2>
</div>
</template>
<script lang="ts">
export default{
name:'school',
data() {
return{
name:'福州大学',
count:40,
addr:'福建省福州市xxxxx',
t_count:10000,
s_count:1000000
}
},
methods:{
}
}
</script>
<style scoped>
.school{
background-color: blueviolet;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
然后在App.vue 文件中引入School.vue ,然后使用该组件
html
<template>
<div class="app">
<h1>Hello Vue !</h1>
<Student/>
<School/> // 使用School.vue组件
</div>
</template>
<script lang="ts">
// 把Student.vue导入
import Student from './components/Student.vue';
// 把School.vue导入
import School from './components/School.vue';
// 使用Student,School就定义export
export default{
name:'App',
components:{Student,School}
}
</script>
<style>
.app{
background-color: aqua;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
按照上次运行方式,再次运行,运行结果如下:

2.3.4 加个班,再写一个任务
任务 | 显示注册界面 |
---|---|
描述 | 显示注册界面,包括用户名,密码,再次输入密码,注册按钮 |
在components文件夹下新建一个Login.vue 文件,按照任务描述编写代码
html
<template>
<body>
<form action="/register" method="post">
<fieldset>
<legend>注册</legend>
<label>用户名:</label><input type="text" name="user" required>
<br>
<label>密码:</label><input type="text" name="pwd" required>
<br>
<label>再次输入密码:</label><input type="text" name="pwd2" required>
<br>
<input type="submit" value="注册">
</fieldset>
</form>
</body>
</template>
<script lang="ts">
export default{
name:'Login',
data(vm) {
return{
}
},
}
</script>
然后在App.vue 文件中引入Login.vue ,然后使用该组件
html
<template>
<div class="app">
<h1>Hello Vue !</h1>
<Login/>
<Student/>
<School/>
</div>
</template>
<script lang="ts">
// 把Student.vue导入
import Student from './components/Student.vue';
// 把School.vue导入
import School from './components/School.vue';
// 把Login.vue导入
import Login from './components/Login.vue';
// 其他文件使用Student就定义export
export default{
name:'App',
components:{Student,School,Login}
}
</script>
<style>
.app{
background-color: aqua;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
运行,界面如下:

2.4 Vue 3 启动!
上面所写的代码是 Vue 2 的形式,Option API 是 vue 2 特性,其缺点在于不利于对方法、数据进行管理,在数据较多时造成管理混乱;而 Compostion API 是 vue 3 特性,它将所有相同功能的数据、方法、计算等属性放在一个 setup 中。
在默认情况下,setup中的变量是非响应式,若需改为响应式,使用 ref
关键字将数据组装。ref
是 vue 3 是对 ts 的基本数据类型进行打包转成对象,这样才能转换为响应式。
2.4.1 Vue 2 升级为Vue 3
Student.vue 文件代码
html
<template>
<div class="student">
<h2>姓名:{{ name }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>地址:{{ addr }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">显式联系方式</button>
<button @click="changeAddr">修改地址</button>
</div>
</template>
<style scoped>
.student{
background-color: blueviolet;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
<script lang="ts">
import {ref} from 'vue'
export default{
name:'Student',
setup() {
let name = ref('张三')
let age = ref(21)
let tel = ref('1008611')
let addr = ref('福建省福州市福州大学计算机与大数据学院')
function changeName(){
name.value = "李四";
console.log(name);
}
function changeAge(){
age.value+=1;
console.log(age);
}
function showTel(){
alert(tel.value);
}
function changeAddr(){
addr.value='中国';
}
return {name,age,addr,changeAge,changeName,showTel,changeAddr};
},
}
</script>
2.4.2 小小改进
如果后期数据量过多,Vue 3 的 setup 要返回一堆的变量和方法名,非常的不方便!
于是可以采用下面写法:
html
<template>
<div class="student">
<h2>姓名:{{ name }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>地址:{{ addr }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">显式联系方式</button>
<button @click="changeAddr">修改地址</button>
</div>
</template>
<style scoped>
.student{
background-color: blueviolet;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
<script lang="ts" setup name="Student">
import {ref} from 'vue'
let name = ref('张三')
let age = ref(21)
let tel = ref('1008611')
let addr = ref('福建省福州市福州大学计算机与大数据学院')
function changeName(){
name.value = "李四";
console.log(name);
}
function changeAge(){
age.value+=1;
console.log(age);
}
function showTel(){
alert(tel.value);
}
function changeAddr(){
addr.value='中国';
}
</script>
如果node.js版本低于18的话,需要安装下面插件:
先在终端按下 ctrl+c,输入 y 结束进程
然后输入代码:npm install vite-plugin-vue-setup-extend -D

安装完后,找到 vite.config.ts 文件,导入该插件,只要在里面添加下面代码即可:
import vueSetupExtend from 'vite-plugin-vue-setup-extend'

安装完后,运行该程序【即新建终端,输入:npm run dev
】,运行界面如下:

2.4.3 响应吧!对象与对象数组
前面提到的 ref
关键字只能将基本数据类型转换为响应式对象,如果要把对象和对象数组转变为响应式,则需要关键字 reactive
。
如果变量前面不加 ref
或者 reactive
,你会发现,点击按钮,界面数据没有变化!
html
<template>
<div class="student">
<h2>姓名:{{ name }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>地址:{{ addr }}</h2>
<h2>拥有一辆{{ car.brand }},价值为{{ car.price }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">显式联系方式</button>
<button @click="changeAddr">修改地址</button>
<button @click="changePrice">加钱</button>
<h2>游戏列表</h2>
<ul>
<li v-for="g in games" v-bind:key="g.id">{{ g.name }}</li>
</ul>
<button @click="changeFirstGame">修改第一个游戏</button>
</div>
</template>
<style scoped>
.student{
background-color: blueviolet;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
<script lang="ts" setup name="Student">
import {ref} from 'vue' // 把基本数据类型转换成响应式对象
import { reactive } from 'vue'; // 把对象转换为响应式对象
let name = ref('张三')
let age = ref(21)
let tel = ref('1008611')
let addr = ref('福建省福州市福州大学计算机与大数据学院')
let car = reactive({brand:'五菱宏光 pro max 天空紫' , price:110})
let games = reactive([
{id:'game01',name:'原神'},
{id:'game02',name:'碧蓝航线'},
{id:'game03',name:'明日方舟'}
])
function changeName(){
name.value = "李四";
console.log(name);
}
function changeAge(){
age.value+=1;
console.log(age);
}
function showTel(){
alert(tel.value);
}
function changeAddr(){
addr.value='中国';
}
function changePrice(){
car.price+=10;
console.log(car.price);
}
function changeFirstGame(){
games[0].name='黑神话悟空';
}
</script>
运行结果如下:
