【有手就行】：从无到有搭建前端VUE项目

前言

由于好久没正儿八经写过前端代码了，导致现在想自己创建个VUE项目搞点东西却连步骤都忘了。反正闲着也是闲着，就简单归纳下，就当整理下笔记吧。

直接开始吧

本次教程主要以VUE 2.x版本为介绍

第一步 环境准备

1.安装Node
从 Node官网下载node.js，至于选哪个版本，看个人需要吧

Node.JS 在任何地方运行 JavaScript

2.配置Node
如果是安装包，系统会自动配置PATH，无需再另外配置；如果是免安装版，需要自己将Node路径配置到环境变量PATH里

# 配置淘宝镜像 加快下载速度
npm config set registry https://registry.npmmirror.com
# 安装cnpm，根据个人需要，可以不安装
npm install -g cnpm

3.安装VUE脚手架（全局安装）

# 2.x版本
npm install -g vue-cli 
# 3.x版本
npm install -g @vue/cli

第二步 创建VUE项目

1.首先进入一个提前准备好的项目路径，在该目录下执行创建命令

# 初始化一个项目 helloWord
# 2.x
vue init webpack helloWord 
# 3.x
vue create helloword

2.这里注意一下，在执行2.x版本安装命令后，下载vue-templates时可能会报超时，因为下载某些package时，国内互联网需要翻墙才可，所以有时会连接不上

3.这时候可以考虑改为离线创建，先手动把webpack下载下来，再依赖下载的webpack进行安装；
首先进入https://github.com/vuejs-templates/webpack GitHub地址，clone或者下载zip到本地；然后在本地用户目录下创建
.vue-templates目录（注意文件夹名前有个点），将下载的webpack解压到.vue-templates目录下

4.再执行vue init webpack helloWord命令的时候，带上参数–offline表示离线创建

# 初始化一个项目 helloWord
vue init webpack helloWord --offline

蓝色字样是安装过程中系统提示选择，需要用户根据个人需要自行选择；后面系统就会根据选择配置下载相关的package，下载完成后初始化就完成了

如果最开始 1 就成功了，就不用管2 3 4了。

最后一步 将项目跑起来

cd到刚创建的项目下，再执行启动命令

cd helloword
# 启动项目
npm run dev

看到以下信息后说明项目启动成功

进入浏览器，输入地址 http://localhost:8080，就能看到一个空项目的最初样子啦

写在最后

哈哈，新手教程，大佬勿喷