目录
最近开始学习一下vue，想要快速入手，也不知道应该看什么课程比较合适，这里我选择看b站上尚硅谷禹神的Vue3教程。
这里创建程序用到的是npm命令，需要安装node.js，这里我还在想我已经安装过了可以直接用，还不知道后面会发生什么。
课程还教我怎么检验我有没有安装node，在终端中输入node回车，如果返回的是node版本并且等待着输入下一个命令就证明具备node环境。我还测试了一下，测试结果如下：
这里应该是成功的，说明我具备node环境。
-
npm创建失败问题解决
但是！没想到在创建项目上就出了问题！根据官方提供的创建语句我在cmd终端中输入，半天没有反应。
反复尝试之后，我决定耐心等待，说不定是因为电脑太卡比较慢，等了五分钟不到，然后出来了一个错误❌，太好了!心都凉了半截。
上网寻找帮助，找到一篇文章，说是清理代理和缓存问题就解决了。
就是执行下面两句代码：
npm config set proxy false
npm cache clean输入第一条代码的时候，诶！？有希望！然后输入第二条代码又报错了...不应该啊？之前明明用过node.js怎么会报错呢
看到一篇文章原文在这里：https://blog.csdn.net/qq_39248724/article/details/141165138本来也想按照作者的步骤，先进入超级用户的，但是我不知道为什么进不去，但是这里我不想深究了，这不是我现在的目的，我就直接按照后面的方法重新设置源，也就是以下这句代码，
npm config set registry https://registry.npmmirror.com然后再执行创建语句就成功了！
按照禹神一样的配置要求创建vue项目，然后在我自己的文件夹下就可以看到了。
这里禹神用的是vscode，打开后发现文件结构有些不一样，但是这里不深究了，后续出现问题再解决。
后面开始讲解各个文件的作用，我这里就挑一些记录，想要知道详细作用的可以自己去了解。
env.d.ts文件的作用是让ts认识各类文件例如 .txt / .jpg 文件等等。
观察文件中没有node_modules文件夹也就是没有依赖，也就是这里爆红的原因。
安装所有依赖
在终端中执行以下代码，即可安装所有的依赖。
npm i可以看到这里文件夹中已经有node_modules文件夹了。
如何启动一个vue项目
拿到一个前端项目如何启动？查看package.json文件，找到一个dev的短命令。想要运行这个项目的话，在终端中输入：
npm run dev
Vite项目中，index.html是入口文件，在项目最外层。将原来的代码注释，这里只写一个简单的框架代码和文字，方便展示效果。
然后在终端中输入 npm run dev 。
这里插一嘴，我觉得使用这些工具提高编程速率一个最简单直接的办法就是，了解这些工具的快捷键，这里vscode打开终端的快捷键是 Ctrl+Shift+~ 如果你没有更改过的话。后面如果有空应该会写一篇文章专门整理一些快捷键，可能吧...
然后就可以看到页面呈现效果，就是我们刚刚在入口文件index.html中写的代码效果。
终止项目快捷键
Ctrl+C 是终止脚手架的快捷键。
如果不更改Index.html中的代码就用它本身的代码，网页则会呈现以下效果：
因为代码中引入了src文件夹中的main.ts文件，src就是开发的核心文件夹。
-
自己写一个App组件
这里根据禹神的教学，先删除了src文件，然后再自己创建src文件夹。
这里自己创建了 main.ts 和 App.vue 之后，打开网页发现是空的，这是因为main.ts里面是空的。
先在在main.ts文件中写入基础代码，这时候'./App.vue' 下方可能有报错提醒，这是因为App.vue文件中没有内容。
// 1. 从vue库中引入createApp用于创建应用
import {createApp} from 'vue'
//引入App根组件
import App from './App.vue'
createApp(App).mount('#app').vue文件中一般写三种标签，分别是template、script、style，如下一个简单的示例。
<template>
<!-- 写结构 html -->
<div class="app">
<h1>你好啊！</h1>
</div>
</template>
<!-- 脚本标签 -->
<script lang="ts">
// 写交互 JS或TS
export default{
name:'App'//组件名
}
</script>
<style>
/* 写样式 */
.app{
background-color: #ddd;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>最终在网页中的效果如下：
-
写一个简单效果
这里click报错是因为没配置showTel方法。
在这里实现配置，就实现点击方法了。
但是此时运行程序，在页面中并不会呈现这个页面的效果，因为还没有调用。此时切换到App.vue中将刚刚写的组件在App.vue中调用，方法如下：
页面最终效果如下：
嗯...搞错了，重来，效果如下：
这里报错我真是非常懊恼，这么简单的代码我寻思我也应该不会打错吧...应该，嗯，不会打错。
vsCode设置自动保存
找了很久没有找到错误真的很bk，最后发现是没有保存。大家记得一定要保存呢！也可以打开自动保存，我怎么记得我之前已经打开过了...
不会打开vsCode自动保存的朋友也可以看我下面这个截图，把off修改成...看你自己的习惯，改完就ok啦！
-
Vue.js devtools检查工具
我一帮网页调试用的是谷歌浏览器，这里如果有魔法的朋友，就可以直接点击管理扩展程序，点击在 Chrome 应用商店中查找就可以直接搜索vue然后安装 Vue.js devtools 就好了。
没有魔法的朋友，可以在网页中搜索极简插件（https://chrome.zzzmh.cn/index），然后搜索vue，也可以直接找到然后下载，我使用的是推荐下载，禹神是这么讲的。
下载之后解压，解压完会有两个文件，有一个后缀为.crx是浏览器的插件。
然后打开浏览器的管理扩展程序，把右上角开发者模式打开。
直接将那个文件拖进去，点击“添加扩展程序”。
安装完之后长这样。
但是我不知道为什么安装完之后虽然可以看到，但是里面却还是空空，按理说应该有东西。
然后我就鬼使神差不知道为什么我就注意到了下面这个按钮。
诶~然后我就点了一下发现，这里居然自己有这个工具，这个按钮之前一直都在，但是我一直没有关注它。扩展程序目前不知道为什么不能使用，先暂时打算用这个vue自带的。
然后这是最终写一个简单效果的样式，这里写一个简单效果用的vue2的语句。
完整代码在这（main.ts在上面有了）：
Person.vue：
<template>
<div class="person">
<h2>姓名：{{name}}</h2>
<h2>年龄：{{age}}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">查看联系方式</button>
</div>
</template>
<script lang="ts">
export default{
name:'Person',
data(){
return{
name:'张三',
age:18,
tel:'123456789000'
}
},
methods:{
changeName(){
this.name='LULU-12'
},
changeAge(){
this.age +=1
},
showTel(){
alert(this.tel)
}
}
}
</script>
<style scoped>
.person{
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button{
margin: 0 5px;
}
</style>App.vue：
<template>
<!-- 写结构 html -->
<div class="app">
<h1>你好啊！</h1>
<Person/>
</div>
</template>
<!-- 脚本标签 -->
<script lang="ts">
// 写交互 JS或TS
import Person from './components/Person.vue'
export default{
name:'App',//组件名
components:{Person}//注册组件
}
</script>
<style>
/* 写样式 */
.app{
background-color: #ddd;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
第一次写这种学习日志，感觉自己码字还蛮有成就感的，之前想写，写到最后都半途而废了，这次我想着发出来的话，可能就会有一种莫名被监督的感觉，希望可以坚持。
标签：npm,node,VUE,文件,App,笔记,学习,vue,代码 From： https://blog.csdn.net/2403_89168113/article/details/143953510