Vue+Webpack创建前端工程

1、检查本地环境

使用Vue搭建项目需要本地安装node、npm、Vue-cli；依次检查本地是否有安装，打开运行窗口输入cmd，分别输入

• node -v
• npm -v
• vue --version

如果返回各自版本号即表示已经安装过了，否则需要自己进行安装，具体的安装自行百度下载安装。
正常安装的node安装会连接国外的npm，可以指定为国内npm镜像如下：

-- 切换 npm 到淘宝镜像
npm config set registry https://registry.npm.taobao.org
-- 下载安装 cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com

2、下载生成项目

以上环境安装完成后，下来要创建项目，有如下步骤

• 在本地任意盘下创建放项目的文件夹（尽量不要放C盘）
• 点击进入创建好的文件夹，按shift+鼠标右键，选择在此处打开命令窗口
• 输入vue init webpack vue-project进行项目的创建，此处vue-project是项目名称，可根据需要自行更改
• 创建项目会弹出询问，包括项目名称确认、添加作者、eslint测试添加等等，（注：在选择是否添加eslint时，可以选择否，因为添加后再后续的开发当中会有许多问题，会有各种的编译不通过等。）根据自己需要，其他如果没有特殊需求可一路回车即可
• 有时在下载过程中会遇到错误
  'eslint'不是内部或外部命令,也不是可运行的程序
error code EINTEGRITY
  执行npm cache verify或npm cache clean --force进行处理，处理完成后如果觉得项目创建有异常可重新生成，但需要删除之前生成的项目文件夹，然后重复上述步骤即可（关于eslint不是内部命令的问题，如果你用的vscode，可在工具中下载插件eslint即可）。

3、运行测试

项目生成好后，运行会报如下错误：
'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序
这是因为项目内没有下载npm导致的，如果你用的vscode工具，可在命令行直接输入npm install执行即可，如果没有用工具可在生成好的项目文件夹下，shift+右键 打开命令窗口，同样输入npm install可进行下载。

下载npm如遇到错误
Unexpected end of JSON input while parsing near '...-commas/-/babel-plugi'
可执行命令 npm cache clean --force处理，然后重新下载npm。

4、运行前配置检查

下载完成后，可在生成的项目中修改基础配置，比如运行监听端口，默认是8080，如果担心有冲突可自行更改，更改文件在config—index.js 。项目基础信息在package.json文件中，有项目名称、作者、运行说明等，可自行查阅，启动项目命令：npm run dev启动完成后回返回请求的地址，复制到浏览器即可请求项目。

好了用vue搭建一个简单的前端项目就完成了。

5、命令错误分析

在运行npm install时遇到ERESOLVE unable to resolve dependency tree异常，通常是因为项目依赖关系发生了冲突或不兼容。
解决办法：

1. 在清除 npm 缓存

npm cache clean --force
# 然后重新下载
npm install

2. 在命令行中加--legacy-peer-dep 或者--force

npm install --legacy-peer-dep
# 或
mpm install --force

3. 更新 npm 版本命令

npm install -g npm