从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_cachenode_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>

运行结果如下:

相关推荐
Yaml43 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
清灵xmf6 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
GDAL6 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1117 小时前
css实现div被图片撑开
前端·css
@蒙面大虾7 小时前
CSS综合练习——懒羊羊网页设计
前端·css
顾菁寒8 小时前
WEB第二次作业
前端·css·html
Qhumaing8 小时前
html第一个网页
网络·html·html5
哇咔咔哇咔10 小时前
使用Markdown编写适用于GitHub的README.md文件的目录结构
vscode·markdown
前端Hardy13 小时前
HTML&CSS:爱上班的猫咪
前端·javascript·css·vue.js·html