VUE从零开始-环境搭建

171 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

这几天打开layui的官网却发现了这个:

layui 官网将于 2021年10月13日 进行下线。

正如作者在申明中说的一样“便纵有万般遗憾,更与何人说?!”在之前的职业生涯中有用过bootstrap、layui、easyui,现在layui即将下线,那么其他的jquary框架呢?是否一样难逃时代的命运。

心怀感恩,感谢这些前辈提供了这么长的服务与支持。

拥抱未来,拥抱更好的新时代,以及所有那些值得去追求的美好事物。

为了自己后面的项目的顺利升级及后续的工作,从现在开始自己学习VUE。

从本文开始记录自己学习VUE的过程。

一、Node.js

1.Node.js安装下载

Node.js的官网nodejs.org/en/download…

image.png

下载对应版本即可,完成安装后在控制台中输入node -v即可查看安装的版本。(Node.js默认会安装npm的,不需要额外安装了,输入npm -v即可查看是否安装成功)

image.png

2.配置环境变量

2.1 系统变量中添加NODE_PATH,输入路径为node安装的路径。我的是C:\Program Files\nodejs\node_modules

2.2 系统变量中Path中添加node的安装路径C:\Program Files\nodejs;(注意结尾不要少了分号)

2.3 用户变量中Path中添加C:\Program Files\nodejs\node_global;C:\Program Files\nodejs\node_cache;这是Node默认调用的模块路径

2.4 配置npm的全局模块的存放路径和cache的路径

npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache"C:\Program Files\nodejs\node_cache"

3.安装cnpm

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成运行cnpm -v查看是否安装成功

image.png

4.安装VUE

4.1安装vue.js

npm install -g vue

安装完成可以通过npm info vue 查看vue信息

4.2安装webpack

npm install -g webpack
npm install --global webpack-cli

安装完成后通过webpack -v查看

4.3安装脚手架vue-cli

cnpm install vue-cli -g

至此,vue的环境就算搭建好了。后面开始学习vue项目了。

加油,相信自己可以!!!