网站导航栏原型图怎么做,一级做a视频在线观看网站,无锡哪家做网站好,网页制作步骤是什么如有错误#xff0c;烦请指正~
目录 一、什么是单页面应用程序
二、使用工具#xff1a;node.js
三、工具链
易错点 一、什么是单页面应用程序
多个组件#xff08;例如登录、注册等以vue结尾的都叫做组件#xff09;在一个页面显示#xff0c;叫单页面应用…如有错误烦请指正~
目录 一、什么是单页面应用程序
二、使用工具node.js
三、工具链
易错点 一、什么是单页面应用程序
多个组件例如登录、注册等以vue结尾的都叫做组件在一个页面显示叫单页面应用程序SPA。通过css和JavaScript来控制多个组件在一个页面显示这是原理知道即可不需要清楚做法。
二、使用工具node.js
node.js工具解析执行Javascript代码。
npm:包管理工具在node.js中自带后端的maven 所以需要下载该软件LTS表示长期支持版本所以建议下载后面有LTS的初次之外也要注意对于初学者来说最好不要用最新版本因为后面想要学习项目的时候可能会冲突。
按照上面的要求下载一个版本即可我安装的是v20.14.0。
安装成功之后到终端先查看一下下载的node版本和npm版本然后使用
pm install express -g //-g表示全局安装用于全局安装 Node.js 的 web 框架 Express
这个是常用到的所以这里用这个命令测试一下 是否能正常使用。 三、工具链
项目脚手架相当于项目的模板。
vite和Vue CLI是两种脚手架。这里用vite演示
在终端使用下面的命令进行创建新项目
npm create vuelatest
创建过程中选择如下 其中的倒数第二个是否引入ESLint用于代码质量检测不建议选“是”因为这个检测对于空格等的都会检查很麻烦。
回到vscode执行上述的项目 里面的是项目所需要的包在vscode的终端输入
npm install
下载所需要的包下载完成之后如下
然后就可以运行该项目了 然后复制上面给出的代码然后就可以看到相应的项目界面了 项目解释 node_modules使用的包
src:写代码的地方
放资源的地方。
组件里面可以套组件叫做子组件。
单独安装路由安装 | Vue Router (vuejs.org)
但是在安装包的时候其实默认情况下就安装了上面这个是没安装的补救方法。 简单了解之后尝试修改项目里的内容下面进行一个简单的修改在当前的项目界面的About后面再添加三个分别为首页、购物车和订单在点击这几个的时候会简单的显示一些内容
修改的步骤实质上就三部分内容分别是
1、在App.vue中添加三个内容 这个显示在 因为修改的是路由里的内容所以需要先查看router里的内容可以发现对于前面中路由中提到的均有一个.vue文件所以
2、创建3个与路由对应的.vue文件里面的内容随机写 3、在router下的文件中添加相应的内容 然后就可以在浏览器进行查看了 响应式状态响应式基础 | Vue.js (vuejs.org)
当其中一个地方的某个值例如a修改了其他地方也会感应到也会修改这个值(a)。
例
script langjs setup //加上setup和后面的一句话就表示响应式import { ref } from vue//下面是当前组件的属性和方法const usernameref(li) function changeName(){username.valuezhang //这里不能用this???为什么}const chaName () username.value QQ; // 箭头函数与上面的函数等价
/script
嵌套路由
嵌套路由 | Vue Router (vuejs.org)
components:组件中的组件。 就是上述的这种方式这里就先不添加了。
易错点
ref需要随时改变的时候就需要加所以不需要随时改的话就不用写有路由就要有路由出口
