如何做网站宣传片五八58同城找工作

如何做网站宣传片,五八58同城找工作,精品网络小说推荐,windows优化大师卸载[vue3 入门]HTML Learn Data Day 7 学习真的是一件很累的事情#xff0c;更何况有这么多杂七杂八的事情 唉唉#xff0c;莎了我吧 原文章地址#xff1a;https://www.cnblogs.com/Reisentyan/p/19656869 Vue3 构建 Vue3 每一次构建新项目时#xff0c;都会从 npm 上拉取…[vue3 入门]HTML Learn Data Day 7学习真的是一件很累的事情更何况有这么多杂七杂八的事情唉唉莎了我吧原文章地址https://www.cnblogs.com/Reisentyan/p/19656869Vue3 构建Vue3 每一次构建新项目时都会从 npm 上拉取模板。在 VS Code 中按CTRL ~打开终端然后输入npm create vitelatest vue -- --template vue-ts解释一下这条命令create vitelatest使用最新版本的 Vite 创建项目vue项目文件夹名--template vue-ts使用 Vue TypeScript 模板中途会问是否使用实验性功能 → 选择NO是否下载并运行 → 选择YES然后它会自动在当前文件夹生成一个完整的 Vue3 项目。每次启动项目都在项目根目录输入命令npm run dev启动本地开发服务器项目入口结构生成后项目默认打开的是index.html。里面有一行关键代码script typemodule src/src/main.ts/script这句话非常重要。意思是浏览器加载 main.ts 作为整个应用的入口模块。也就是说真正的程序逻辑从main.ts开始。关于一些基础知识在main.ts中我们会看到一些代码我将代码及注释放到这里import{createApp}fromvue// 从 vue 模块中拿出 createApp 这个命名导出import./style.css// 引入全局样式importAppfrom./App.vue// 从 App.vue 中拿出默认导出的组件createApp(App).mount(#app)// 创建一个 Vue 应用实例// 并把它挂载到 index.html 里的 #app 上也就是说从 app.vue 中拿东西出来插到 index.html 中的#app这个组件上面从 app.vue 中我们会看到三段代码script setup langts /script template /template style scoped /stylescript setup逻辑template结构HTMLstyle scoped样式在 Vue3 中使用script setup是推荐写法它是 Composition API 的语法糖。style加上scoped后这里的样式只对当前组件生效不会跑到外面去乱窜防止样式污染。样例script setup langts defineOptions({ name: App }); /script template div classtitle h1这是一个标题/h1 /div /template style scoped .title { background-color: pink; box-shadow: 0 0 10px; padding: 20px; border-radius: 10px; } /style一个.vue文件在编译后本质上会变成一个 JS 模块模块对外输出一个值——通常就是“组件对象”。也就是说做网站就像拼积木一样每一个Vue文件都是一块积木最后拼好之后Vue 会把整棵组件树插入到 HTML 里的那个#app容器里。以下是一段简单的代码在网页中显示了一块信息页一份简单的样例这是我的部分文件树D: index.html src │ App.vue │ main.ts │ style.css │ ├─assets │ vue.svg │ └─components IsMe.vue我将 IsMe.vue 拼图插入到 App.vue 中IsMe.vue:script setup langts defineOptions({ name: personPage }); /script template div classbackground h1This Is My Homepage/h1 div classinf这就是信息页/div /div /template style scoped .background { background-color: pink; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; } .background h1 { text-align: left; } .inf { box-shadow: 0 0 5px; color: purple; font-size: 50px; border-radius: 20px; } /styleApp.vuescript setup langts import PersonPage from ./components/IsMe.vue; /script template PersonPage / !--在这里插入IsMe.vue组件-- /template style scoped/styleimport是把组件模块引入PersonPage /是使用组件在script setup中 import 后可以直接使用不需要额外注册index.html!doctypehtmlhtmllangenheadmetacharsetUTF-8/linkrelicontypeimage/svgxmlhref/vite.svg/metanameviewportcontentwidthdevice-width, initial-scale1.0/titlevue/title/headbodydividapp/div!--在这里插入App.vue组件--scripttypemodulesrc/src/main.ts/script/body/html这里的#app只是一个挂载容器。真正的页面结构全部来自 Vue。总结Vue3 的工作流程就是写小积木Components。在大积木里组装小积木App.vue。通过main.ts把大积木挂到index.html。像这样拼积木一份项目就拼出来了