查看“使用Hbuilder 创建最简单Vue应用”的源代码
←
使用Hbuilder 创建最简单Vue应用
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==创建项目== 参考[[使用Hbuilder 创建Vue应用]]创建项目 ==编写代码== ===目录结构=== [[文件:Vue2022080704.png|250px]] ===APP.vue=== App.vue: 项目入口文件 将下述内容覆盖至app.vue原有内容。 下述内容主要分为三部分,html代码,scrpit代码, css代码, 这一个文件相当于创建了一个vue模块,并通过export default输出,以供其他文件使用。 export default作用可参考: [[vue中的export default]] <nowiki> <template> <div id="app"> {{ message }} </div> </template> <script> export default { name: 'myapp', data() { return { message: "今日立秋" }; }, } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> </nowiki> ===main.js=== main.js: 项目的核心文件。 这里由它来创建实例,绑定页面节点。 render函数可参考:[[vue中的render函数]] <nowiki> import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')</nowiki> ==运行项目== [[文件:vue2022080703.png|200px]] 浏览器打 开地址localhost:8080 如果看到下述页面说明 项目运行成功! [[文件:vue2022080706.png|600px]]
返回至
使用Hbuilder 创建最简单Vue应用
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息