前言
由于好久没正儿八经写过前端代码了,导致现在想自己创建个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,就能看到一个空项目的最初样子啦
写在最后
哈哈,新手教程,大佬勿喷