Vue学习笔记1-windows系统搭建VUE环境

第一步 node环境安装

1.1 如果本机没有安装node运行环境，请下载node 安装包进行安装

1.2 如果本机已经安装node的运行换，请更新至最新的node 版本

下载地址：https://nodejs.org/en/ 或者 http://nodejs.cn/

第二步 node环境检测

2.1 在终端输入:

node -v

如果输出版本号，说明我们安装node 环境成功

2.2 查看 npm 的 版本号

在终端输入:

npm -v

第三步 设置nodejs的global和cache路径（可选）

设置路径能够把通过npm安装的模块集中在一起，便于管理。 在nodejs的安装目录D: nodejs下，新建node_global和node_cache两个文件夹，设置node_global为全局模块存放路径,设置node_cache为缓存文件夹。
执行指令：

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

设置成功后，后续用命令npm install -g XXX安装的XXX模块就在D: odejs ode_global ode_modules里。
查看配置信息指令：

npm config list

第四步 vue-cli脚手架安装

4.1 如果访问外网比较慢，可以使用淘宝的镜像 https://npm.taobao.org/

打开命令终端输入：

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

回车之后，我就可以可以快乐的用 cnpm 替代 npm
看到这样

恭喜你，你已经成功安装了 cnpm

4.2 安装vue-cli

npm install vue-cli -g

如果你很幸运，那么接下来就是这样的

PS:
怎么安装指定版本npm？

npm install [email protected]

windows怎么卸载cnpm？

npm uninstall cnpm -g

第五步 开始创建项目

5.1 使用vue初始化基于webpack的新项目

vue init webpack my-project

PS：项目创建过程中会提示是否安装eslint，可以选择不安装，否则项目编译过程中出现各种代码格式的问题；

5.2 项目创建完成后，安装基础模块

cd my-project
npm install

PS:模块安装时间有可能会很长，依赖与网速；

5.3 启动项目

npm run dev

如果在浏览器中能够看到这个界面，那么恭喜你，成功了。