[Vue]Vue-cli脚手架学习(一)——Node\vue-cli安装

一、安装nodeJS，点我

1.1 安装

进入node官网，下载64位安装包，一直点击下一步（勾上Add to Path），按默认安装

1.2 验证是否安装成功

执行下面命令即可，出现版本即为安装成功，未成功的查看Path是否正确

node -v

新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西

1.3 环境配置

环境配置，主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径。

之所以要配置，是因为在执行类似安装语句时：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思），会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。

例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【D:\NodeJS】下创建两个文件夹【node_global】及【node_cache】如下图：

创建完两个空文件夹之后，打开cmd命令窗口，输入

npm config set cache "D:\NodeJS\node_cache"

npm config set prefix "D:\NodeJS\node_global"

接下来设置环境变量，关闭cmd窗口，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”
进入环境变量对话框，在【系统变量】下新建【NODE_PATH】，输入【D:\NodeJS\node_global\node_modules】，

将【用户变量】下的【Path】修改为【D:\NodeJS\node_global】

二、安装cnpm

2.1 安装淘宝镜像
淘宝镜像官网 ，执行下面命令即可

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

上一步配置好就不会把cnpm装到C盘去了

2.2 验证是否安装成功

执行下面命令即可，出现版本即为安装成功，未成功的查看Path是否正确

cnpm -v

安装完之后就可以用cnpm代替npm ，装包速度比较快哦

这里遇到一个坑：
cnpm - 解决 " cnpm : 无法加载文件 C:\Users\用户名\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息 。。。 "

• 第一步在win10 系统中搜索框 输入 Windos PowerShell 选择 管理员身份运行

• 第二步打开了powershell命令行之后,输入

set-ExecutionPolicy RemoteSigned

然后更改权限为A，最后通过 get-ExecutionPolicy 查看当前的状态，完成。

三、安装vue-cli脚手架构建工具

3.1 确认是否曾经安装过

vue -V

如果安装过，执行下面命令卸载

npm uninstall vue-cli -g

执行下面命令重新安装

cnpm install -g @vue/cli

如需指定版本安装

安装3.0以下执行下面命令

npm install -g vue-cli@版本号

安装3.0以上执行下面命令

npm install -g @vue-cli@版本号

四、创建项目

4.1 执行命令 vue create 项目名称 ，创建项目

vue create  my-vue-project

默认设置选第一个按回车直接创建

手动设置选第二个如下，按空格选择你所需要的东西，回车确定（建议取消Linter /Formatter，不然报错报到你怀疑人生）

是否使用路由是否history 模式？（history 模式需要后端支持，所以选No）
把配置放在哪里（package.json）

是否将你现在的配置设置为之后所有创建的项目（No）

创建成功

4.2 按照提示运行项目

cd my-project

cnpm run serve

所有命令推荐使用cmd执行

进入e盘

e:

进入对应文件夹

 cd e:/vue-cli-study