如何搭建Vue脚手架（详解）包含如何安装npm和cnpm

#如何搭建Vue脚手架（详解）包含如何安装npm和cnpm| 来源: 网络整理| 查看: 265

文章目录前言请务必阅读前言部分一、npm和cnpm的安装1.什么是npm和cnpm？2.安装NodeJs2.1安装2.2 查看是否安装成功 3.修改之前的环境变量3.1配置环境变量 4. 安装cnpm 二、安装Vue1.安装全局vue2.查看安装版本三、创建Vue脚手架1.vue create 项目名2.选择Manually select features3.选择你所需要的功能4.选择版本5.选择是否将路由模式设置为history6.选择packsge.json7. 选择是否保存现有模板8.安装完成9.切换到当前项目路径10.npm run serve 运行项目总结

前言

提示：以下是本篇文章正文内容，下面案例可供参考提示：因为现在安装的截止目前最新的nodejs版本，所以看到一、npm和cnpm的安装下面的查看是否安装成功就已经安装完成了，并且已经自动配置好了nodejs的环境变量。如果需要修改nodejs的环境变量请继续阅读

请务必阅读前言部分一、npm和cnpm的安装 1.什么是npm和cnpm？ npm(node package manager) 是nodejs的包管理工具，用于Node插件管理（安装、卸载、管理依赖等）cnpm:是国内的一款基于npm的Nodejs包管理工具，使用的是阿里的淘宝镜像。因为npm是国外的所以下载安装一些插件会变得很慢，有时候还会丢包。所以阿里的淘宝团队就做了一个cnpm来同步更新npm的功能 2.安装NodeJs

NodeJs官网地址在这里插入图片描述

2.1安装下载完成以后点击安装就可以了，选择要保存的路径例如;D:\Program Files\nodejs 直到安装完成就可以啦 2.2 查看是否安装成功打开命令提示符窗口的快捷键是win+R 然后输入cmd就可以了在命令符窗口输入npm -v看到版本卡号就安装成功了在这里插入图片描述

3.修改之前的环境变量通过命令npm config ls可以查找到之前的环境变量存放路径为了方便以后以后查找，首先配置npm的全局模块global的存放路径和cache的存放路径例如放在 D:\Program Files\nodejs中 npm config set prefix "D:\Program Files\nodejs\node_global" npm config set cache"D:\Program Files\nodejs\node_cache"

参考下图：在这里插入图片描述安装完成以后就会有下面两个文件夹：

3.1配置环境变量

以win10操作系统为例

在桌面找到我的电脑——右击属性——在相关设置里面选择——高级系统设置——环境变量——找到系统变量里面的新建——输入变量名和变量值以后点击确定在这里插入图片描述

然后再从系统变量中添加上 D:\Program Files\nodejs 具体步骤如下：在这里插入图片描述

在命令行输入以下命令安装express（注：“-g”表示安装到global目录下，就是上面设置的node_global中）

npm i express -g

然后在刚才创建的node_global就可以看见express啦在这里插入图片描述

在命令行输入node，然后再执行requeire(‘express’) 查看是否能够正常加载模块

成功的话就可以了，如果不成功可以再去检查一下环境变量有没有错误

4. 安装cnpm 命令如下已弃用：npm install -g cnpm --registry=https://registry.npm.taobao.org

如果大家之前安装了上面的镜像，建议先清空一下缓存，按照下列方式进行更新

// 1. 清空缓存 npm cache clean --force // 2. 切换新源 npm config set registry https://registry.npmmirror.com // 3. 输入cnpm -v 查看是否安装成功就可以了 cnpm -v 如果报错再修改环境变量如下图在这里插入图片描述

完成以后再次输入cnpm -v 查看一下就可以了 cnpm -v 二、安装Vue 1.安装全局vue cnpm i -g @vue/cli 2.查看安装版本 vue -V 三、创建Vue脚手架 1.vue create 项目名

在这里插入图片描述

2.选择Manually select features

在这里插入图片描述

3.选择你所需要的功能 Choose Vue version —— 选择vue的版本Babel —— ES6转ES5语法TypeScript —— 开发语言渐进式web应用程序Router —— 路由Vuex —— Vuex状态Css Pre-processors —— 选择Css方式 cass/scss、lessLinter/Formatter —— 规范类型Unit Testing —— 选择Unit测试方式E2E Testing —— 选择E2E测试方式在这里插入图片描述