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 2023-08-01 21:34  冰血飞  阅读(21)  评论(0编辑  收藏  举报

导航