Vue2+vue-cli+vue-router+vuex +elementUI/vant项目搭建和配置webpack（一）
项目整套：Vue2+vue-cli+vue-router+vuex +elementUI/vant
进一步配置完善已迁移到（二）部分
1、环境准备：
① Git 环境检测
git 环境
git --version
② node 环境和npm 环境检测
node 环境
node --version
npm 环境npm -v
③ Vue 环境检测
查看VUE脚手架版本
vue -V
安装Vue2
npm install vue -g （或：cnpm install vue -g） //安装Vue.js
npm list vue 验证vue安装是否成功
安装Vue2脚手架
npm install vue-cli -g
或者
npm install @vue/cli –g
或者
npm install -g @vue/cli@版本号 vue@版本号
npm list vue -g //验证Vue2脚手架安装是否成功
安装webpack
-g //全局安装
-D //局部安装
npm install --save-dev webpack -g
或者
npm install webpack -g
npm install webpack webpack-cli webpack-dev-server -g（建议）
检查安装
npm webpack -v
或者
webpack -v
2、项目搭建
利用webpack创建基于Webpack的Vue.js项目
注意： （vue init webpack 项目名称 使用 ） 只有在Vue的脚手架版本低于Vue-cli（2.9.6）的时候才可以用
建议使用webpack---webpack初始化环境 （此处报错1 ）
vue init webpack 项目名称
//vue-cli2 脚手架初始化 `vuecli3之前的创建命令`
安装过程中一直yes，刚刚开始建议不安装下面的代码检测部分
不成功的话请错误1，安装@vue/cli-init
采用方式yarn安装搭建
npm install yarn -g //安装
yarn --version //检测环境
npm install @vue/cli-init -g
npm i webpack@3.6.0 --save-dev
运行
npm run dev //运行项目
yarn dev //yarn 构建的新项目
到这里，项目已经搭建并且跑起来了！
打开浏览器输入： http://localhost:8080 查看如下
项目开源对应的地址：
https://gitee.com/lourance/taibai
Git 克隆地址：
git clone https://gitee.com/lourance/taibai.git
代码拉下来需要安装依赖
cd taibai
npm install //安装依赖
npm run dev //运行项目
补充
正常操作
mkdir taibai 创建一个空的文件夹
cd taibai 进入文件夹
npm init -y （或者npm init也可以）--正常初始化环境
3、项目配置：
进一步配置完善已迁移到（二）部分
内容包含
配置路由 router.js
配置路由拦截器 permission.js拦截器
配置 nprogress 浏览器上面加载进度条
配置 axios 请求
配置 element-ui组件库
文章可搜索：
❤ Vue2完整项目进一步配置配置（二）
或者文章地址：
http://t.csdn.cn/SFZkj
4、错误
（1）Failed to download repo vuejs-templates/webpack-simple: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:80，
Failed to download repo vuejs-templates/webpack-simple: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:80
有人说 hosts 问题 ，我把 hosts 删除了也不行，有人说镜像问题，把镜像设置成淘宝的也不行。最易解决的方法就是在终端输入 npm config set http-proxy null
npm config set http-proxy null
结果： 方法为生效
安装桥接工具 @vue/cli-int
因为Vue-cli 3.x和vue-cli 2.x使用了相同的 vue 命令，所以 vue-cli 2.x 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具 ——@vue/cli-init
vue cli3之前的创建命令 是 vue init webpack 项目名称
3+ 以后需要单独安装 @vue/cli-init
npm install @vue/cli-init -g
(2) A system error occurred: uv_os_gethostname returned ENOSYS (function not implemented)
at new Defaults (C:\Users\xx\AppData\Roaming\nvm\v16.14.0\node_modules\@vue\cli\node_modules\@achrinza\node-ipc\entities\Defaults.js:26:20)
对应文件：
C:\Users\xx\AppData\Roaming\nvm\v16.14.0\node_modules@vue\cli\node_modules@achrinza\node-ipc\entities
添加 localhost
os.hostname=()=>"localhost"
文章来源：https://www.toymoban.com/news/detail-565961.html
Vue2+vue-cli+vue-router+vuex 项目配置（二）
文章地址：
http://t.csdn.cn/2Z6Ux文章来源地址https://www.toymoban.com/news/detail-565961.html
到了这里，关于❤ Vue2+vue-cli+vue-router+vuex +elementUI/vant完整项目搭建 项目和配置（一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
