大连手机自适应网站制作费用企业网站多少钱一年
目录
环境准备
创建Vue项目
项目目录说明
后续开发过程中常用命令
环境准备
- 安装开发工具：vscode、webstorm、idea都可以
- 安装node:V22以上版本即可
- 安装pnpm
不知道怎么安装的可以私信我教你方法
创建Vue项目
本地新建一个文件夹，之后在文件夹下打开命令行，执行如下命令：
// 创建vue3项目
pnpm create vue@latest 项目名字my-vue3-demo
每一步选项按照下面截图选择即可
之后使用idea打开对应的项目文件夹my-vue3-demo，执行安装依赖命令：
// 安装依赖
pnpm install
项目目录说明
my-vue3-demo // 项目名称
├── dist // 打包之后生成的文件
├── node_modules // 依赖包
├── public // 静态资源
│ └── favicon.ico // 图标
├── src // 源码
│ ├── assets // 静态资源
│ │ └── logo.png
│ ├── components // 组件
│ ├── router // 路由配置文件
│ ├── store // 状态管理文件
│ ├── views // 页面
│ ├── App.vue // 页面入口文件
│ ├── main.ts // 实例入口文件
├── package.json // 配置文件
├── pnpm-lock.yaml // 依赖包版本
├── tsconfig.json // ts配置文件
├── vite.config.ts // vite配置文件
├── .gitignore // git忽略文件
├── .eslintrc.js // eslint配置文件
├── .prettierrc // 格式化配置文件
├── .editorconfig // 编辑器配置文件
└── README.md // 项目说明后续开发过程中常用命令
pnpm install // 安装依赖
pnpm run dev // 运行项目
pnpm run build // 打包项目
pnpm run preview // 预览打包
pnpm run help // 查看帮助