VUE的使用及安装开发步骤(一)

前端技术 2019/02/13 Vue ,前端设计

安装

一、安装node.js

    (一)、安装环境

    1、本机系统:Windows 10 Pro(64位)

    2、Node.js:v10.15.1LTS(64位)

    

    (二)、安装Node.js步骤

    1、下载对应你系统的Node.js版本:https://nodejs.org/en/download/

    2、选安装目录进行安装

    3、环境配置

    4、测试

    (三)安装

    1、双击下载的安装包,开始安装node.js

    1.png

    点击【Next】按钮

    2.png

    勾选复选框,点击【Next】按钮

    3.png

    修改好目录后,点击【Next】按钮

    4.png

    5.png

    6.png

    安装完后点击【Finish】按钮完成安装


    安装完成后简单测试是否安装成功,

    在键盘按下【win+R】键,输入cmd,然后回车,打开cmd窗口

    7.png

    8.png

    安装完后的目录如下图所示:

    1.png

    此处说明下:新版的Node.js已自带npm,安装Node.js时会一起安装,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西


二、配置变量

    

说明:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。

例如:我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中,则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图:

2.png

创建完两个空文件夹之后,打开cmd命令窗口,输入

npm config set prefix "D:\Develop\nodejs\node_global"
npm config set cache "D:\Develop\nodejs\node_cache"

接下来设置环境变量,关闭cmd窗口,“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

1.png

进入环境变量对话框,在【系统变量】下新建【NODE_PATH】,输入【D:\Develop\nodejs\node_modules】,将【用户变量】下的【Path】修改为【D:\Develop\nodejs\node_global】

1.png

2.png

3.png

4.png

配置完后,安装个module测试下,我们就安装最常用的express模块,打开cmd窗口,

输入如下命令进行模块的全局安装:

npm install express -g     # -g是全局安装的意思

1.png


三、安装cnpm

    由于npm在国内有一点限制,这里安装淘宝npm(cnpm)

    输入命令:

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

    测试:

cnpm -v

四、安装vue-cil

    输入命令:

cnpm install -g vue-cli

    安装完成后 在命令行输入vue 可以看到如下显示即为成功。

1.png

本文地址:https://stayed.cn/item/115

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。