vue项目搭建步骤

vue项目搭建以及环境变量的设置

一、安装node.js

1、官网地址：https://nodejs.org/zh-cn/

1、node安装后的设置(node_global和node_cache)

详细地址：https://blog.csdn.net/scorpio_meng/article/details/83314675

二、接下来就该设置nodejs prefix（全局）和cache（缓存）路径

1、在node的安装路径下创建两个文件夹：node_global和node_cache

2、设置选择缓存文件夹

npm config set cache "D:\Program Files\nodejs\node_cache"

设置全局模块存放路径

npm config set prefix "D:\Program Files\nodejs\node_global"

设置成功后，D:\Program Files\nodejs\node_global里会存放用命令npm install XXX -g安装以后的模块。

三、安装npm (或者安装cnpm,使用淘宝镜像)

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以乐于分享的淘宝团队干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”

执行命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

四、设置环境变量

1）鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。

2）修改系统变量PATH

3）新增系统变量NODE_PATH

五、安装vue

执行命令：cnpm install vue -g

六、安装vue命令行工具，即vue-cli脚手架

执行命令：cnpm install vue-cli -g

七、创建新项目

1、打开开始菜单，输入 CMD，或使用快捷键 win+R，输入 CMD，敲回车，弹出命令提示符。打开你将要新建的项目目录

2、根据模版创建新项目

执行命令：vue init webpack 项目名称（使用英文）

3、初始化完成后的项目目录结构如下：

4、安装工程依赖模块

定位到mytest的工程目录下，安装该工程依赖的模块，这些模块将被安装在：mytest\node_module目录下，node_module文件夹会被新建，而且根据package.json的配置下载该项目的modules

执行命令：cnpm install

5、运行该项目，测试一下该项目是否能够正常工作，这种方式是用nodejs来启动

执行命令：cnpm run dev

项目启动成功如下图所示：