搭建Vue前端项目

前言：开始学习vue，前期想要新建一个项目来看一下，结果踩坑，遇到了问题，但是查询得到了解决，记录如下

1.安装Nodejs：

首先安装nodejs，配置环境变量：

• 下载链接：http://nodejs.cn/download/

• 选择对应操作系统和环境的安装，并且设置bin目录到path环境变量

2.确认安装npm

输入npm验证安装情况：

3.切换源

由于某种原因，使用外国的镜像来安装会出现连接失败的情况，故要切换成国内的源

//查看当前registry（源）
npm config get registry
//切换淘宝源
npm config set registry https://registry.npm.taobao.org

4.安装vue-cli

//安装vue-cli
npm install -g vue-cli

5.安装离线版webpack的模板.

踩坑：因为某种原因，当获取vue模板的时候会显示一种下载，然而下载的服务器在usa（你懂的），所以下载再久也下载不下来，导致了错误。

解决方法：采用github上面的模板，下载离线模板，离线生成项目就可以了

在github上面搜索：‘webpack’，找到如下结果，下载zip包

找到电脑如下路径：

C:\Users\Administrator\.vue-templates

Administrator为电脑的用户名，如果电脑不是这个用户名，则需要改为你电脑对应的用户名

在此文件夹下新建webpack文件夹，然后把刚才在Github下载的zip包解压在这个文件夹里面，如下图

6.新建项目

执行vue init webpack projectname --offline新建工程，其中projectname为你要新建工程的名称。

• 下面要求还要填一些信息

Project name 项目名
Project description 项目名描述
Author 作者邮箱
Use ESLint to lint your code? 是否需要ESlist语法检查
Setup unit tests with Karma + Mocha? 是否需要单元测试
Setup e2e tests with Nightwatch? Yes是否需要e2e测试

填完就可以生成项目了

7.运行

进入目录（新建工程的时候会替你生成一个文件夹）执行npm run dev即可运行

success！