严正声明！
重要的事情说三遍，本文章仅供分享，文章和代码都是开源的，严禁以此牟利，严禁侵犯尚硅谷原作视频的任何权益，我知道学习编程的人各种各样的心思都有，但这不是你对开源社区侵权的理由！
重要的事情说三遍，本文章仅供分享，文章和代码都是开源的，严禁以此牟利，严禁侵犯尚硅谷原作视频的任何权益，我知道学习编程的人各种各样的心思都有，但这不是你对开源社区侵权的理由！
重要的事情说三遍，本文章仅供分享，文章和代码都是开源的，严禁以此牟利，严禁侵犯尚硅谷原作视频的任何权益，我知道学习编程的人各种各样的心思都有，但这不是你对开源社区侵权的理由！
终于学到硅谷外卖啦，尚硅谷的视频都是很不错的，考虑到白嫖党们经常会遇到一些问题，所以我也从零开始跟着视频用最新的Vue3,Vite还有yarn来构建一下项目，这样自己也能加深对vue3的理解。
没有使用ts,因为我还没感觉到ts到底哪里好，以后有需要再说，一个项目技术选型定下来就负责执行就行了，遇到问题再说。这个项目我直接用Vue3的组合式api来改写，虽然vue2的动态数据vue3也能用，但是专业程序员要有点追求。
第2集：这个路由的构思也是很重要的，一级路由和二级路由的概念，这个构思也颇为重要。
第3集：直接把项目文件夹（关注尚硅谷微信公众号网盘下载获取）解压，然后在vscode中打开文件夹（这一步如果都不会的话。。。嗯。。。基础可能需要加强一下。。凡事不要急功近利。也可以评论区留言，有空我会回复的。），基本的构建过程具体见https://blog.csdn.net/returnadsss/article/details/128070638?spm=1001.2014.3001.5501，不赘述了，-g全局安装yarn后，在任何地方不用再安装一遍了，直接yarn init –y即可，
遇到这个问题，检查后发现文件夹名字为中文后运行yarn init –y 就会报错，不是什么系统性错误，改掉package.json里面的name即可。这里不使用yarn create vite命令，因为刚开始学习时不要使用create-vite脚手架，不然里面很多预设都用不到，而且官网也已经发布了以后推荐使用vite而非脚手架create-vite,于是我们再yarn add vite –d,关于vite的知识可以看付金权的vite视频。这里有个打包的要求可以直接用vite实现，开发环境端口8080，生产环境端口5000，server命令就是直接后端打开。这里我们用vite实现同样的效果。根据付金权视频，我们可以做出如下的配置文件：
至于实际的配置因为暂时没搞懂它的需求，所以暂时不管。
小知识：Iconfront这个网站可以获得很多矢量图标。
第5集：这里使用到项目源码，老师为了方便直接用成品，我们可以一个个创建，这里命名assets和common都一样，目录只要方便检阅就可以了。我们先跟着创建，后面遇到不符合最新写法的东西我们再调整。
第6集：这里使用stylus,我们使用最新的less,但在那之前，我们了解一下stylus,大概了解一下跟less差不多，就是省略了{}和;。可以根据它的stylus语法改写成less,因为量也不大。但是网上关于vite这个构建工具甚至webpack的资料都很少，初级教程倒是反复复制粘贴，我们根据实际开发场景想一想，经过试验，我们可以直接在vue中写less,混合语法什么也都是可以使用的。
既然less的直接引用已经没问题了，vue的打包只需要npx vite build命令即可，知道了可以准确打包后，我们只需把项目搞定即可，打包的事情暂时不用操心。
第6集：因为我们已经确定了vue项目对less的支持，而只需把stylus改写成less即可，都是预编译器，语法相差无几。
这个mixins.less大概是这样的
第7集：这个拆分的思路其实很不错，可以学习一下。
Main.js和app.vue基本不用多说，基础，其它的可以参考一下，如果出现报错就按提示yarn add vue 和yarn add @vitejs/plugin-vue,就不会出什么问题了。
Vue3中main.js这样写：
在vite.base.config.js中这样：
第8集：这一集的路由用vue3这么写就行了。
这里暂时没想到用setup的好处，我们先用老写法，值得注意的是，vue3中template下已经不要求只有一个根标签了。其它的照着写即可。
第9集：这一集老师使用了之前写好的网页模板，这个等我们以后有空也可以自己用原生写一遍，加深一下记忆。其它的照着老师的写就行了，这个写法倒是没有更新。
第10集：额。。。这一集。。改less改了半天，很浪费时间，不过改过后也还好。这里有一个需要注意的是要引入iconfont,这就是一个用矢量来绘画图片的库，可以减小图片大小，具体引入方式网上也有，这里大概切个图，主要是profile组件里的icon-person和icon-mobile,随便找个差不多的引入就行了。这里我也使用跟老师一样的链接引入，实际开发可以下载下来减少请求的数据量。
