vue cli4 安装及构建(vue+ts)项目目录

环境需求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。本机电脑node 版本 14.11.0 (使用的是nvm 管理的node版本)
在这里插入图片描述

安装vue cli

可以使用下列任一命令安装这个新的包:

	npm install -g @vue/cli
	yarn global add @vue/cli

查看安装版本命令

	vue --version

我目前安装的版本是 4.5.6
在这里插入图片描述

创建一个项目

运行以下命令来创建一个新项目:

	vue create frontName

其中一些配置选项看自己需求吧
通过↑ ↓ 箭头选择你要配置的项,按 空格 是选中,按 a 是全选,按 i 是反选,空格来选中取消在这里插入图片描述
在这里插入图片描述
因为还没正式学习3.0,所以还是用的2.x 版本的vue
选npm 或者yarn 都是可以的
在这里插入图片描述
搭建好之后,初始项目结构长这样:在这里插入图片描述

├── shims-tsx.d.ts              // 相关 tsx 模块注入
├── shims-vue.d.ts              // Vue 模块注入
shims-tsx.d.ts,允许你以 .tsx结尾的文件,在 Vue项目中编写 jsx代码
shims-vue.d.ts 主要用于 TypeScript 识别 .vue 文件, Ts默认并不支持导入 vue 文件,这个文件告诉 ts导入 .vue 文件都按 VueConstructor<Vue>处理。

├── tests                           // 测试用例
├── .eslintrc.js                    // eslint 相关配置
├── .gitignore                      // git 忽略文件配置
├── babel.config.js                 // babel 配置
├── postcss.config.js               // postcss 配置
├── package.json                    // 依赖
└── tsconfig.json                   // ts 配置

后面按照大型项目的结构 来建项目结构,建造后 :
在这里插入图片描述

 ├── utils                       // 工具方法(axios封装,全局方法等)
 
 ├── README.md                       // 项目 readme
 
 ├── vue.config.js                   // webpack 配置

github地址:https://github.com/peiyu-ye/front-template

猜你喜欢

转载自blog.csdn.net/weixin_44897255/article/details/108616497