[笔记]vue从入门到入坟《五》vue-cli构建vue webpack项目

参考：

用vue-cli搭建vue项目

vue-cli 项目结构目录简介

前言

一、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
• 1

安装vue-cli(vue3)

npm install -g @vue/cli
• 1

2.2 创建项目

创建名为test的项目

vue init webpack test
• 1

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

“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。