参考：
用vue-cli搭建vue项目
vue-cli 项目结构目录简介

文章目录

• 前言
• 一、Vue-cli介绍
• 二、开始
• • 2.0 下载安装npm 以及git
  • • npm安装
    • git安装
  • 2.1 全局安装 vue-cli
  • 2.2 创建项目
  • 目录介绍
• 三、常见问题
• 总结

前言

一、Vue-cli介绍

官网
简单地说就是构建vue项目的工具包，通过vue-cli会自动构建vue项目的结构。

二、开始

2.0 下载安装npm 以及git

npm安装

npm(Nodejs软件包管理工具)

官网下载地址

下载后双击安装即可

git安装

下载地址

安装git后 右键鼠标会发现git bash


后面的npm 可以在gitbash中输入命令行

2.1 全局安装 vue-cli

安装vue-cli(vue2)

npm install --global vue-cli

安装vue-cli(vue3)

 npm install -g @vue/cli

2.2 创建项目

创建名为test的项目

vue init webpack test

注意：没说明的直接回车选择默认就好

“Project name”：这个是项目名称，默认是输入时的那个名称，想改的话直接输入修改，也可以直接回车
“Install vue-router”:是否需要vue-router，这里默认选择使用，这样生成好的项目就会有相关的路由配置文件
“Use ESLint to lint your code”:是否使用ESLint，刚才说了我们这个项目需要使用所以也是直接回车，默认使用，这样会生成相关的ESLint配置
“Setup unit tests with Karma + Moch?”: 是否安装单元测试。由于我们现在还没有单元测试，所以这里选择的是”N”，而不是直接回车哦
“Setup e2e tests with Nightwatch”：是否安装e2e测试，这里我也同样选择的是“N” 这几个配置选择yes 或者 no 对于我们项目最大的影响就是，如果选择了yes 则生成的项目会自动有相关的配置，有一些loader我们就要配套下载。
所以如果我们确定不用的话最好不要yes，要么下一步要下很多没有用的loader

目录介绍

创建完后 用hbuilder打开就是如下图的目录结构：

三、常见问题

Error: Cannot find module ‘@dcloudio/uni-cli-i18n’

总结

简单地介绍vue-cli项目的构建，以便使用hbuilder。