❤ Vue2+vue-cli+vue-router+vuex +elementUI/vant完整项目搭建 项目和配置（一）

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"

Vue2+vue-cli+vue-router+vuex 项目配置（二）
文章地址：
http://t.csdn.cn/2Z6Ux