从0开始的 Vue 生活

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>

运行结果如下：