文章目录
同步发布于我的个人站点： http://www.panzhixiang.cn/article/2022/10/17/55.html
前言
其实不算入门了，因为我已经用了一段时间vue了，但是以前一直就是写一些简单的页面和组件，但是vue整体是怎么架设的我其实不清楚，这次主要是为了整理一下这部分的内容，顺带从头到尾都写一份笔记总结一下。
笔记中很多内容都是参考了B站上一个UP主的视频，贴上链接，有兴趣的可以去看一下：Vue项目实战
开发环境介绍
我是通过windows11 上的VS code 连接到WSL上的，WSL是ubuntu 20.04的系统，所以我的开发环境是VS code + ubuntu。
这也是我工作中的开发环境，因为在ubuntu上开发相对于windows来说更方便，尤其是命令行操作方面，但是ubuntu又不能满足日工工作软件的需要，因为很多工作软件是没有ubuntu版本的，所以windows11+WSL 的模式挺不错的，推荐大家尝试。
npm 和 node 版本如下：
$ npm -v
8.13.2
$ node -v
v14.19.1
创建vue3项目框架
大家可以参考vue3的官网：创建一个Vue应用
先执行init命令
$ npm init vue@latest
执行之后会逐步出现一些配置让我们选择，建议新手只配置“Project name”，其他的都选NO， 以下是我的配置。
Vue.js - The Progressive JavaScript Framework
✔ Project name: … vue3-notes
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
Scaffolding project in /home/zhixiang_pan/learningspace/vue_study/vue3-notes...
Done. Now run:
cd vue3-notes
npm install
npm run dev
我把Project name设置为vue-notes，这会在当前路径下生成一个vue3-notes目录。
配置完之后进入到vue3-notes目录（也就是你在project name选项中输入的那个路径）执行 npm install （安装必要的依赖） 和 npm run dev 就可以在本地运行一个vue3的样例应用了。
到这里就已经完成了一个vue3项目的创建工作了。
目录结构解释
在创建完Vue3项目并且初次安装依赖和运行本地环境之后，项目内目录结构应该如下图所示：
这里简单解释一下后面会用到几个目录和文件。
- src
src 目录就是存放源代码的总目录，一般来说vue相关的代码都会放在src里面 - components
vue3中有一个组件的概念，也就是把可以重复使用的代码抽出来单独封装成一个组件，这样就可以被不 同的地方调用，components目录就是用来存放这些组件的地方。 - App.vue
可以简单地把App.vue理解为一个根组件，也就是vue中所有的页面都会用到这个组件，换句话说，任何页面刷新，都会调用App.vue里面的代码。 - main.js
可以简单理解为这是整个站点的入口，整个vue项目从这里开始运行，所以一般会把一些影响全局的配置以及代码放在这里面。
还有一些其他的文件和目录，对于vue3入门理解来说影响不大，就不再多说，感兴趣的话可以去官网看看。