时间戳

首页 > 技术文章 > vue学习过程总结（02）- 网上开源项目vue-element-admin的启动

vue学习过程总结（02）- 网上开源项目vue-element-admin的启动

wang-liang-blogs 2019-11-25 13:41 原文

1.功能丰富的项目：https://github.com/PanJiaChen/vue-element-admin.git

因为我配置的时候，遇到许多的问题，用了一天半才启动的，所以安着他文档一步一步来。下面我梳理一下整个过程。

1.1.克隆项目,使用github工具克隆项目，没有的可以去下载：https://git-scm.com/download/win

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

1.2.进入项目的根目录。

# 进入项目目录
cd vue-element-admin

1.3.安装项目的依赖包。执行的是根目录下的package.json文件，会下载package.json文件中"dependencies"和"devDependencies"中指定的包。

# 安装依赖
npm install

 安装成功的话，会在项目的根目录出现node_modules目录，里面有很多的依赖包。关于install几个我遇到的问题以及我整理的解决方法（我就是卡这里的，遇到了几个问题）。

1.
错误信息：
npm ERR! Error while executing:
npm ERR! C:\Program Files\Git\mingw64\bin\git.EXE ls-remote -h -t git://github.c                                                                                                                                                 om/adobe-webplatform/eve.git
npm ERR!
npm ERR! fatal: unable to connect to github.com:
npm ERR! github.com[0: 52.69.186.44]: errno=Result too large
对策：
git config --global url."https://".insteadOf git://

2.
错误信息：
ailed to connect to github.com port 443: Timed out
对策：
$ git config --global http.proxy https://username:password@proxyserverip:port
git config --get http.proxy

3.（这个不是这里遇到的，我自己先记录这里）
npx webpack -v
执行错误Error: Cannot find module 'webpack-cli'

对策：
需要全局安装webpack-cli
npm install webpack-cli -g

1.4.安装npm的淘宝镜像cnpm，这一步我跳过去了，我配置vue的开发环境是安装了一个全局的npm淘宝镜像。如果经过1.3还是安装包不成功，试试用cnpm，总之一个一个尝试着，看能能解决吧。

# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

1.5.启动这个vue项目。

npm run dev

浏览器访问 http://localhost:9527，可以看到登录页面就成功了。

 

2.vue开发工具的选择。

eclipse开发工具：在eclipse的软件市场上搜索vue.js的插件，网上说这个插件不是免费，可以试用一个月。

Intellj idea开发工具：一直用eclipse，所以想换换新的工具。下载地址：https://www.jetbrains.com/idea/download/#section=windows

建议使用社区版（Community）的zip包，解压直接就可以用了，不用安装。

2.1.Intellj idea开发工具下载vue.js插件

如果是内网需要配置代理：File--Settings--搜索proxy--选择HTTP Proxy，进入到代理配置界面，选择Manual proxy configuratio,配置相关的代理服务器的ip和端口。

下载插件：File--Settings--Plugins--搜索vue.js--install. 重启Intellj idea

2.2.导入vue项目.

File--Open--选择项目的根路径

3.1.极其简单干净的模板，少的很多的功能以及依赖包：https://github.com/PanJiaChen/vue-admin-template.git

这个可以用当做基础的一个vue项，可以用来做项目的初始化。

3.2.vue极简模板（只有登录菜单）：https://github.com/woai3c/vue-admin-template

推荐阅读