1.Vue基本概念和使用
Vue是一个渐进式的前端(JavaScript)框架
渐进式:只使用Vue轻巧的核心库,根据所需引入各种插件
多使用2.X版本,3.X相对较少
2.Vue-cli安装
验证nodejs环境是否安装,安装好了就跳过2.1
打开黑窗口输入指令:
- node -v
- npm -v
2.1Vue-cli介绍
vue-cli是vue的官方脚手架工具(快速工程化命令工具)之一, 用来帮助程序员们快速搭建基于vue框架的开发环境。
Vue-cli = Vue + 一堆的js插件
-
vue-cli 4.5以下,对应的是Vue2
-
vue-cli 4.5及以上,对应的是Vue3
2.2搭建nodejs环境
nodejs是javaScript运行环境
1.下载
官网:https://nodejs.org/zh-cn/download/prebuilt-installer
- LTS意为长期维护版,特点是稳定,但有些最新的特性可能没有,建议下载时选择这种版本。
- Current是新特性版本,优点是拥有最新的特性,但可能不稳定,对应一般开发人员,或产品级的项目不建议使用。
注:msi为安装版本,为更好的了解nodejs的配置请下载zip进行手动配置
2.解压
将文件解压到指定位置(例如:C:\Program Files),并在解压后的目录下建立node_global和node_cache这两个目录
- node_global npm全局安装位置
- node_cache npm缓存路径
3 .配置环境变量
环境变量 | 配置示例 |
---|---|
新增NODE_HOME | C:\Program Files\node-v10.16.3-win-x64 |
修改PATH | 在最后添加:;%NODE_HOME%;%NODE_HOME%\node_global; |
注意:对于path变量是修改,而不能将以前的变量清除
配置完成后,可以通过以下命令查看配置:
- echo %node_home%
- echo %path%
测试安装是否成功:[见大标题2下]输入黑窗口指令
4.配置npm全局模块路径和cache默认安装位置
cmd,分开执行如下命令:
- npm config set cache "【node_cache路径】"
- npm config set prefix "【node_global路径】"
作用:方便管理,提高系统性能,开发环境中提高团队协作效率......
5.修改npm镜像提高下载速度
在命令行中执行以下命令,使用淘宝镜像源(这是一种常用的国内镜像源):
使用 npm config
命令设置:
npm config set registry=https://registry.npmmirror.com
这将把默认的镜像源设置为淘宝镜像源,以后每次使用 npm 安装包时都会从这个镜像源下载。
编辑 .npmrc
文件:
在你的用户目录下找到 .npmrc
文件(一般在 C:\Users\你的用户名
或者 ~
目录下),用文本编辑器打开它,添加以下内容:
registry=https://registry.npmmirror.com
这样就永久修改了 npm 的镜像源,提高下载速度。同时,国内还有其他一些可用的镜像源,如腾讯云镜像源等,你可以根据实际情况选择合适的镜像源进行设置。
检查换源是否成功:
npm config get registry
检查安装结果
node -v
npm -v