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"

2、 设置环境变量

　　说明：设置环境变量可以使得住任意目录下都可以使用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源在国内有限制，速度和包都容易出问题，建议采用

方法如下：

1、换成阿里源

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

npm config get registry
返回https://registry.npm.taobao.org，说明镜像配置成功。
3、安装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之旅吧。