Vue学习1:windows系统安装Vue

转载自:https://www.cnblogs.com/miller-star/p/6394760.html

在本地windows系统构建Vue工程,需要在本地安装Vue,安装Vue是通过npm来安装的,因为nodeJs已经把npm集成到里面了,所以第一步先安装nodeJs。

1.安装nodeJs:https://www.runoob.com/nodejs/nodejs-install-setup.html

2.安装完之后,win键+R快捷键 启动 运行 窗口,输入cmd 回车,进入本地命令行窗口,输入 path,查看系统环境中的 路径配置,Roaming\npm 的路径已经加载进去。

Vue学习1:windows系统安装Vue

 

Vue学习1:windows系统安装Vue

输入 node --version 验证 nodejs是否安装完成

Vue学习1:windows系统安装Vue

3、npm安装好之后,利用淘宝npm镜像安装 相关依赖。ps:我这里选择的是 淘宝npm镜像为例(也可以选择其他的)

输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org ,等待安装

Vue学习1:windows系统安装Vue

4、依赖安装完之后,安装全局vue-cli脚手架,用于帮助搭建所需的Vue模板框架

输入命令:cnpm install -g vue-cli ,等待安装完成。

Vue学习1:windows系统安装Vue

安装完成之后,输入vue 或者 vue -V 命令验证

Vue学习1:windows系统安装Vue

5、创建一个vue项目

输入:cd /d D:\workspace\vue-test 切换到响应的工作目录

输入:vue init webpack 【项目文件夹名】  ,创建一个vue项目

如:vue init webpack vue_test 会在文件中生成一个【项目文件夹名】的文件夹

Vue学习1:windows系统安装Vue

Vue学习1:windows系统安装Vue

会出现下面配置选项:工程,Git的信息,Vue的配置,最后一条 我选 的 No,I will handle that myself,选其他的,我本地安装就卡死了。

Vue学习1:windows系统安装Vue

ps:我就是这里安装卡死了

Vue学习1:windows系统安装Vue

选最后一条,安装完成之后

Vue学习1:windows系统安装Vue

6.安装依赖

1).输入:cd vue_test(项目名),进入到创建的项目文件夹

2).输入:npm install,等待安装

Vue学习1:windows系统安装Vue

在文件系统中,会发现项目结构里,多了一个node_modules文件夹(该文件里的内容就是之前安装的依赖)

基于脚手架创建的默认项目结构如下图所示:

Vue学习1:windows系统安装Vue

7.测试环境是否搭建成功

在cmd里输入:npm run dev 

然后在浏览器里输入:localhost:8080(默认端口为8080)

Vue学习1:windows系统安装Vue

 

至此,欧耶,完成。