vue-cli使用教程（vue-cli+webpack快速构建项目）

第一步创建一个目录（用来放你的项目）

第二步安装node和npm

这一部分请访问网址：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450141843488beddae2a1044cab5acb5125baf0882000

第三步使用cmd命令安装vue环境（也可使用git bash）

全局安装vue以及vue-cli，在cmd命令行输入npm install --global vue vue-cli 

(install代表安装，可简写成i，global代表全局，也可以简写成g，简写后：npm i --g vue vue-cli)

第四步创建项目

先定位到第一步创建的目录中

创建一个基于 webpack 模板的新项目敲命令行： vue init webpack test（test这个是项目名）

回车后后终端会出现下图“一问一答”模式，如图：

这里有几个需要说明一下，没说明的直接回车选择默认就好，对项目没多大影响，很傻瓜式：

“Project name”：这个是项目名称，默认是输入时的那个名称，想改的话直接输入修改，也可以直接回车

“Project description”：项目描述，也可直接点击回车，使用默认名字

“ Author (* <*>)”：作者，输入你的大名

“Vue build (Use arrow keys)”：选择默认的就成Runtime + Compiler: recommended for most users

“Install vue-router? (Y/n)”：是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y” 或者直接回车即可。

“Use ESLint to lint your code”:是否使用ESLint，刚才说了我们这个项目需要使用所以也是直接回车，默认使用，这样会生成相关的ESLint配置

“Pick an ESLint preset Standard”： 接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，直接y回车

“Set up unit tests Yes”： 是否安装单元测试，我选择安装y回车

“ Pick a test runner”：just

“Setup e2e tests with Nightwatch”：是否安装e2e测试，这里我选择的是“Y”

“Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)”：是否使用安装依赖的包，这个我使用的是npm install，也可以使用yarn install

这几个配置选择yes 或者 no 对于我们项目最大的影响就是，如果选择了yes 则生成的项目会自动有相关的配置，有一些loader我们就要配套下载。所以如果我们确定不用的话最好不要yes，要么下一步要下很多没有用的loader

3.全部选择好回车就进行了生成项目，最后生成的目录结构如下图：

下面是项目结构的解释

 	build  //构建脚步目录，保存一些webpack的初始化配置
	config  //构建配置目录，项目初始化的配置，包括端口号等
	node_modules  //npm加载的项目依赖的模块
	src  //源码目录，这里是我们要开发的目录，基本上要做的事情都在这个目录里
	- assets  //资源目录，用来放置图片，如logo等 
	- components  //组件目录，用来放组件文件
	- router  // 
	- app.vue  //是项目入口文件
	- main.js   //是项目的核心文件
	static   //文件夹用来放置静态资源目录，如图片、字体等。
	test   //初始测试目录，可删除
	.babelrc babel   //编译参数，vue开发需要babel编译 
	.gitignore    //用来过滤一些版本控制的文件，比如node_modules文件夹 
	index.html   //是首页入口文件，你可以添加一些 meta 信息或统计代码啥。 
	package.json   //是项目配置文件，记载着一些命令和依赖还有简要的项目描述信息 
	README.md    //项目的说明文档，markdown 格式，介绍自己这个项目的

至此项目就已经构建完成了。

下一篇使用@vue/cli构建项目教程：https://blog.csdn.net/qq_40015826/article/details/89249086