vue学习001 --环境搭建

系统 ： win

cmd： cmder 连接：https://cmder.net/

1.安装node.js

连接地址： http://cdn.npm.taobao.org/dist/node/v10.15.3/node-v10.15.3-x64.msi

一路next便可

安装测试：  输入npm

即成功

1启动cmd依次执行如下两条命令

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

二、 设置环境变量

　　说明：设置环境变量能够使得住任意目录下均可以使用cnpm、vue等命令，而不须要输入全路径

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

　　2．点击环境变量弹出下列对话框：

　　3．新增系统变量NODE_PATH：把变量值设置成“D:\devtools\nodejs\node_global\node_modules” （这样就能够把后面全局安装的装到global里而且能够直接用命令使用。）

4． 修改用户变量PATH：选中PATH，点击编辑，把“D:\devtools\nodejs\node_global;”加到前面

2.换源

使用淘宝源，由于node源在国内有限制，速度和包都容易出问题，建议采用

方法以下： 

一、换成阿里源

npm config set registry https://registry.npm.taobao.org
二、验证命令

npm config get registry
返回https://registry.npm.taobao.org，说明镜像配置成功。
三、安装cnpm

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

就能够尽情的使用cnpm安装了，速度提高很大

3.安装脚手架和webpack

使用命令  

命令输入

　 cnpm install vue –g  //全局安装vue

 　cnpm install -g vue-cli                        //全局安装vue-cli

　 cnpm install -g webpack                          //全局安装webpack

     cnpm install -g webpack-dev-server             //安装webpack的本地webserver

     安装完成后，vue-cli脚手架其实就已经把vue也装掉了，因此只需输入vue  -V 和 webpack  -v  等等就能够查看安装成功与否

 

至此，环境搭建已完成，接下来建立一个项目开始vue之旅吧。

4建立vue项目

 1.先到目录下：eg

2.初始化项目  vue init  webpack +项目名称

vue init webpack  first-vue

3.进入项目目录 

cd first-vue

4.cnpm run dev

5.打开网站就能够看到你的vue项目了

 

 如今就开始你的vue之旅吧。