dugubingxun

学习是要一直坚持的事

讲一讲我用vscode生成的Vue工程

近照官网教程,先建立一个文件夹,然后用vscode打开,

然后执行  npm init vue@latest 命令

出现页面我全部选择NO,那些组件用到之后再往进加,要么太乱了

然后录入自己要创建的项目名称,我的名称起名 myvue ,注意项目名称不识别大写

然后执行命令:cd  myvue   再执行命令   npm install  项目就创建完成了

最后执行 npm run dev 就可以出现欢迎页面 

下面就讲一下新建出来的这个项目

首先就是主页面 index.html  一切程序的起始 进去后会发现,里面建了个id是app 的div 

引入了 src/main.js ,我们直接进入入这个文件

进去后会看见这个文件中中入了  样式:/assets/main.css

还有vue引入的标准语句 import { createApp } from 'vue'

然后中入了一个 /App.vue 的模板 ,然们再进入这个模板 

进入后会发现  一个组合式模板  

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome '
</script>
我们查看这两个组件 会发现HelloWorld.vue 定义了模板页面简单 
而 TheWelcome  这个进去合会发现还是一组组合模板
然后我发现这样看的话比较难懂,所以打算先放一放
我试着修改了一下里面的东西看看效果,总得来说有点收获
,最后我计划按照教程里面的一步步先学习下,学有所成的时候,再来解析这个《简单》的试例
 

 

posted on   冰血飞  阅读(23)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示