零基础 Vue 开发环境搭建打开运行Vue项目

vue

【相关推荐】IntellIJ IDEA 配置 Vue 支持打开Vue项目

　　所需文件

　　node.js环境（npm包管理器）(node-v8.11.3-x64.msi)(npmV5.6.0)

　　cnpm npm的淘宝镜像

　　vue-cli 构建工具(脚手架)

一、安装node

　　安装完node，就自动在path里增加环境变量，但是为了以后的本地部署项目，我们需要找到node.js的安装根目录，在当中新建“node_global”和"node_cache"两个文件夹。

1、启动CMD依次执行以下两条命令
　　npm config set prefix "F:\set-soft\nodejs\node_global"
　　npm config set cache "F:\set-soft\nodejs\node_cache"

　　后续用命令npm install -g XXX安装，模块就在D:\nodejs\node_global\node_modules里。

2、设置环境变量：

　　（1）修改用户变量PATH：把"D:\nodejs\node_global"加到后面。

　　（2）新增系统变量NODE_PATH：设置成“D:\nodejs\node_global\node_modules”。

　　NODE_PATH = F:\set-soft\Node\nodejs
　　PATH = %NODE_PATH%\;%NODE_PATH%\node_modules;%NODE_PATH%\node_global;

　　这样就可以把后面全局安装的装到global里并且可以直接用命令使用。

二、安装vue

　　1.安装cnpm

　　　　说明：由于许多npm包都在国外，用淘宝的镜像服务器，对依赖的module进行安装。

　　　　参考网址为：http://npm.taobao.org/

　　　　安装命令为：npm install -g cnpm --registry=https://registry.npm.taobao.org

　　2.用cnpm安装vue

　　　　安装命令为：cnpm install vue -g

　　3.安装vue命令行工具

　　　　安装命令为：cnpm install vue-cli -g

三、项目开发

　　（1）创建工程

　　　　1. cd命令进入将要新建工程的目录，如“E:\nodejs”

　　　　2. 用命令"vue init webpack mytest"创建一个基于 webpack 模板的新项目，工程名为"mytest"。

　　（2）安装工程依赖（打开别人项目第一步，）

　　　　1. cd命令进入工程目录

　　　　2. 用命令"cnpm install”安装该工程依赖的模块，这些模块将被安装在：mytest\node_module目录下，node_module文件夹会被新建，而且根据package.json的配置下载该项目的modules。

　　（3）运行项目

　　　　1. cd命令进入工程目录

　　　　2. 用命令“cnpm run dev”运行项目。

　　（4）打包项目

　　　　 cnpm run build

四、常见错误

　　1.cnpm run dev之后，光标一直在另起一行的位置闪，但是丝毫没有别的反应

　　重新安装npm，输入npm install cnpm -g --registry=https://registry.npm.taobao.org命令

　　参考文献：如何运行vue项目

　　　　　　　cnpm命令无响应

零基础 Vue 开发环境搭建 打开运行Vue项目