从0开始的 Vue 生活

理论最高的吻2024-03-10 8:34

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>

运行结果如下：

相关推荐
叱咤少帅（少帅）42 分钟前
Node.js 开发项目
node.js
kooboo china.1 小时前
Tailwind CSS 实战：基于 Kooboo 构建企业官网页面（一）
前端·css·编辑器
凉豆菌1 小时前
在html中如何创建vue自定义组件（以自定义文件上传组件为例，vue2+elementUI）
vue.js·elementui·html
Zww08912 小时前
出现delete CR eslint错误
vscode
沉迷...2 小时前
详解.vscode 下的json .vscode文件夹下各个文件的作用
ide·vscode·json
DN金猿3 小时前
使用npm install或cnpm install报错解决
前端·npm·node.js
小妖6663 小时前
vscode vue文件单行注释失效解决办法
ide·vscode·编辑器
layman05284 小时前
node.js 实战——（Http 知识点学习）
http·node.js
2501_915373884 小时前
Node.js 学习入门指南
学习·node.js
Geek__19924 小时前
VSCode远程图形化GDB
ide·vscode·编辑器
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03我决定放弃搞 Java 了04Coze扣子平台完整体验和实践（附国内和国际版对比）05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06DeepSeek各版本说明与优缺点分析07yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记08苍穹外卖面试总结09如何在WPS和Word/Excel中直接使用DeepSeek功能10YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU