阿里企业网站托管,卡当网站建设,群晖 多个wordpress,wordpress证书关闭Vue 一、配置环境1.1 安装node.js1.1.1 node.js 下载1.1.2 node.js 安装1.1.3 node.js 配置 1.2 安装VSCode1.2.1 VSCode 下载1.2.2 VSCode 安装1.2.3 VSCode 配置 二、创建Vue项目2.1 使用命令行创建Vue项目2.2 使用VSCode运行Vue项目2.3 尝试编写Vue项目2.3.1 准备工作2.3.2 … Vue 一、配置环境1.1 安装node.js1.1.1 node.js 下载1.1.2 node.js 安装1.1.3 node.js 配置 1.2 安装VSCode1.2.1 VSCode 下载1.2.2 VSCode 安装1.2.3 VSCode 配置 二、创建Vue项目2.1 使用命令行创建Vue项目2.2 使用VSCode运行Vue项目2.3 尝试编写Vue项目2.3.1 准备工作2.3.2 完成一个小任务2.3.3 额外练习2.3.4 加个班再写一个任务 2.4 Vue 3 启动2.4.1 Vue 2 升级为Vue 32.4.2 小小改进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变量弹出下面界面 点击新建将下面路径输入进去
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退出来的这种情况重新做上一步即可。 点击确定后会退回的一下界面 再次点击确定环境变量就配置完成了。
接下来键盘按下WinR【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 vuelatest 按下回车。
【该命令表示要创建一个Vue项目工程该命令会根据Vue自己的工程模板调用Vue的工程创建工具Vite创建一个工程模板。】
等待一段时间此时可能会报下面错误。 这时输入 npm config set strict-ssl false 来关闭npm的SSL验证。 关闭后再次输入 npm init vuelatest 按下回车 按下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 代码
import { createApp } from vue;
import App from ./App.vuecreateApp(App).mount(#app);APP.vue 代码
templatediv classapph1Hello Vue !/h1Student//div
/templatescript langts// 把Student.vue导入import Student from ./components/Student.vue;// 使用Student就定义exportexport default{name:App,components:{Student}}
/scriptstyle.app{background-color: aqua;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
/styleStudent.vue 代码
templatediv classstudenth2姓名{{ name }}/h2h2年龄{{ age }}/h2button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickshowTel显式联系方式/button/div
/templatestyle scoped.student{background-color: blueviolet;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
/stylescript langtsexport default{name:student,data() {return{name:张三三,age:18,tel:1008611}},methods:{changeAge(){this.age1;},changeName(){this.name李四四;},showTel(){alert(this.tel);},}}
/script运行方式如下
新建Terminal终端输入代码npm run dev ctrl鼠标单击链接 运行结果如下 2.3.3 额外练习
任务显示学校信息描述显示学校的名字班级数量所在地址老师的数量、学生数量
在components文件夹下新建一个School.vue 文件按照任务描述编写代码
templatediv classschoolh2名字{{ name }}/h2h2班级数量{{ count }}/h2h2所在地址{{ addr }}/h2h2老师数量{{ t_count }}/h2h2学生数量{{ s_count }}/h2/div/templatescript langtsexport default{name:school,data() {return{name:福州大学,count:40,addr:福建省福州市xxxxx,t_count:10000,s_count:1000000}},methods:{}}
/scriptstyle scoped
.school{background-color: blueviolet;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
/style然后在App.vue 文件中引入School.vue 然后使用该组件
templatediv classapph1Hello Vue !/h1Student/School/ // 使用School.vue组件/div
/templatescript langts// 把Student.vue导入import Student from ./components/Student.vue;// 把School.vue导入import School from ./components/School.vue;// 使用StudentSchool就定义exportexport default{name:App,components:{Student,School}}/scriptstyle.app{background-color: aqua;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
/style按照上次运行方式再次运行运行结果如下 2.3.4 加个班再写一个任务
任务显示注册界面描述显示注册界面包括用户名密码再次输入密码注册按钮
在components文件夹下新建一个Login.vue 文件按照任务描述编写代码
templatebodyform action/register methodpostfieldsetlegend注册/legendlabel用户名/labelinput typetext nameuser requiredbrlabel密码/labelinput typetext namepwd requiredbrlabel再次输入密码/labelinput typetext namepwd2 requiredbrinput typesubmit value注册/fieldset/form/body
/templatescript langtsexport default{name:Login,data(vm) {return{}},}/script然后在App.vue 文件中引入Login.vue 然后使用该组件
templatediv classapph1Hello Vue !/h1Login/Student/School//div
/templatescript langts// 把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就定义exportexport default{name:App,components:{Student,School,Login}}/scriptstyle.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 文件代码
templatediv classstudenth2姓名{{ name }}/h2h2年龄{{ age }}/h2h2地址{{ addr }}/h2button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickshowTel显式联系方式/buttonbutton clickchangeAddr修改地址/button/div
/templatestyle scoped.student{background-color: blueviolet;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
/stylescript langtsimport {ref} from vueexport 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.value1;console.log(age);}function showTel(){alert(tel.value);}function changeAddr(){addr.value中国;}return {name,age,addr,changeAge,changeName,showTel,changeAddr};},}
/script2.4.2 小小改进
如果后期数据量过多Vue 3 的 setup 要返回一堆的变量和方法名非常的不方便
于是可以采用下面写法
templatediv classstudenth2姓名{{ name }}/h2h2年龄{{ age }}/h2h2地址{{ addr }}/h2button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickshowTel显式联系方式/buttonbutton clickchangeAddr修改地址/button/div
/templatestyle scoped.student{background-color: blueviolet;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
/stylescript langts setup nameStudentimport {ref} from vuelet name ref(张三)let age ref(21)let tel ref(1008611)let addr ref(福建省福州市福州大学计算机与大数据学院)function changeName(){name.value 李四;console.log(name);}function changeAge(){age.value1;console.log(age);}function showTel(){alert(tel.value);}function changeAddr(){addr.value中国;}/script如果node.js版本低于18的话需要安装下面插件
先在终端按下 ctrlc输入 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 你会发现点击按钮界面数据没有变化
templatediv classstudenth2姓名{{ name }}/h2h2年龄{{ age }}/h2h2地址{{ addr }}/h2h2拥有一辆{{ car.brand }}价值为{{ car.price }}/h2button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickshowTel显式联系方式/buttonbutton clickchangeAddr修改地址/buttonbutton clickchangePrice加钱/buttonh2游戏列表/h2ulli v-forg in games v-bind:keyg.id{{ g.name }}/li/ulbutton clickchangeFirstGame修改第一个游戏/button/div
/templatestyle scoped.student{background-color: blueviolet;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
/stylescript langts setup nameStudentimport {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.value1;console.log(age);}function showTel(){alert(tel.value);}function changeAddr(){addr.value中国;}function changePrice(){car.price10;console.log(car.price);}function changeFirstGame(){games[0].name黑神话悟空;}/script运行结果如下
