vue cli4 安装及构建项目目录
环境需求
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 配置