初始化项目

创建vue项目

npm:
npm create vite@latest 项目名称

yarn:
yarn create vite

pnpm:
pnpm create vite

• 输入命令后，填写项目的名称。选择使用的框架，这里是Vue，然后选择使用的语言，这里选的是TypeScript。
• 选择完毕后，进入到项目目录cd xxx，安装项目的初始依赖npm install。
• 在终端输入命令，使用vscode打开当前项目：code .。前提是在终端先进入到项目目录下。

code .

• 运行项目：npm run dev

项目初始目录结构

• node_modules：项目安装的第三方包的存放目录。
• public：存放不需要编译构建的纯静态资源的目录。
• src：基本上所有需要编译构建的资源，都存放在src目录，打包构建，主要就是构建src中的代码。
• src/main.ts：项目的启动入口文件，项目中用到的全局组件、依赖都可以在此处注册。
• src/App.vue：项目的根组件。
• vite-env.d.ts：
• components：存放非路由、公共的，在多个组件中多次复用的组件。放在此处的组件的名称一般采用大驼峰命名。
• assets：存放一些需要编译构建的纯静态资源。
• .gitignore：声明哪些文件不需要git版本管理的配置文件。
• index.html：单页面文件的页面文件。
• package-lock.json：存放着项目所用到的第三方包的一些信息记录，包含了包的版本、下载地址等等。
• package.json：存放着项目开发环境和生产环境所用到的依赖信息，以及一些npm脚本。
• README.md：项目说明文档。
• tsconfig.json：typescript的配置文件，存放typescript的配置项。
• vite.config.js：vite的配置文件，所有vite的相关配置都在这里进行配置。

项目定制目录结构

在src目录里面创建文件目录：

• api：接口存放目录。
• router：存放项目中路由相关的模块。
• styles：存放全局样式表。
• store：存储pinia状态管理的模块。
• layout：布局的意思，存放公共的布局组件。
• utils：存放项目中使用到的工具函数。
• plugins：存放注册给vue的一些插件，或是给vue注册的实例原型方法。
• views：存放项目中的路由组件。此处的组件命名通常使用小写字母多个单词使用-连接。
• composables：存放项目中提取出来的、封装的组合式API函数。

提交到git版本管理

作用：代码备份、历史记录、多人协作。

1. 初始化一个本地空的git仓库

   git init
   

2. 将所有修改添加到本地暂存区

   git add .
   

3. 提交至本地仓库

   git commit -m "备注"
   

4. 连接远程仓库

   git remote add origin 仓库地址
   

5. 查看连接的仓库地址

   git remote -v
   

6. 提交到远程仓库

   git push -u origin master / git push -u origin master:master(本地分支:远程分支)
   

   origin = 仓库地址，就是仓库地址的别名。

   -u的意思是将这次提交到 origin master 记录下来，下次提交同一个地址和仓库就直接push就可以了。

   意思是将本地master分支的代码推送到线上的master分支上去。