摘要:现在学习的是新版本vue3,是目前前端项目开发国内比较火的框架,并且灵活易于上手,而且拥有丰富的生态系统和社区支持
记录一下学习知识
Vue.js 是一个用于构建用户界面的渐进式JavaScript框架
通常简称为Vue(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架
现在学习的是新版本vue3,是目前前端项目开发国内比较火的框架,并且灵活易于上手,而且拥有丰富的生态系统和社区支持
官网:Vue.js - 渐进式 JavaScript 框架 | Vue.js
ok既然是开发框架,先了解怎么安装使用:
1)构建环境:Vue使用Node.js环境,所以我们要安装Node.js,然后还有通常一起使用的npm(包管理工具),node.js安装通常会自带npm,所以只需要按照Node.js就好
至于什么是Node.js,先理解为一个运行JavaScript的环境就好了
从Node.js — 在任何地方运行 JavaScript 官网下载最新版本的Node.js
推荐后缀.LTS安装包对应稳定版
下载好了安装包是防呆式一键安装:
按照它的默认配置一路点next,最后install即可,安装完后finish
其中注意一个可根据自己需求修改的地方就好了:它的默认安装目录(一般是C盘),你可以自定义修改让它安装到哪里
安装完可以在命令行cmd里使用两个命令检验是否安装成功:
# 检测当前node.js的版本,返回对应版本即证明安装成功
node -v一样的检验npm安装是否成功
npm -v具体详细步骤参考菜鸟教程:Node.js 安装配置 | 菜鸟教程
它默认会安装在C盘用户目录下
默认在C盘用户目录下构建一个全局仓库来存储相关包,通常是一些通用包,比如我们使用的Vue框架包通常就存在这里
查看全局仓库位置
npm list -global(-g简写)这个仓库是全局生效的,意思就是这个仓库里存储的包是在全局环境下可以使用的
所以将Vue下载到这里,然后在系统内任意位置就可以构建Vue项目,更加方便
下载包到全局仓库需要带上-g即
npm install-g
而
npm install会下载包到对应项目文件下的本地仓库里,只在这个项目里生效
如果不想把这个仓库构建在默认C盘下,那可以修改配置信息,自定义仓库的构建位置,比如:
npm config set prefix "D:\nodejs\node_global"这样就会构建在你的电脑D:\nodejs\node_global文件里
全局仓库还搭配一个缓存cache一起使用,缓存中保存了全局仓库内包的副本,如果本地项目仓库需要下载包,首先会去这个cache里找,找到了就会直接引用到本地项目里,不需要去远端仓库下载
查看cache位置
npm config get cache默认在C:\用户\AppData\Local\npm-cache包内
修改全局仓库也可以搭配修改这个cache位置,一样也是修改这个配置config里的cache位置信息
npm config set cache “D:\nodejs\node_cache”下载包的远端仓库地址配置:
查看具体配置的远端仓库地址
npm get registry默认中央仓库地址:https://registry.npmjs.org/ 懂得都懂可能会很慢,会导致卡在 sill idealTree buildDeps 没有反应的问题
所以推荐配置镜像地址,比如淘宝镜像地址来加速
npm config set registry https://registry.npm.taobao.org或者我们可以使用淘宝定制包cnpm
cnpm是中国版的npm,是淘宝定制的cnpm命令行工具,代替默认的npm,跟npm用法完全一致,只是在执行命令时将npm改为cnpm
使用它来下载具体包,将其安装在全局仓库使用
npm install -g cnpm --registry=https://registry.npmmirror.com然后使用cnpm指令代替npm指令即可,如
cnpm install vue -g运行环境搞定了,然后下载vue到全局仓库下生效即可
使用的基础包有:vue,vue-cli
vue是框架核心支持包,包含核心功能
vue-cli是一个用于快速构建Vue项目的命令行工具,让开发者快速使用vue框架构建基础项目模板
还有其他相关包按需下载
vue-router:构建单页应用(SPA),它提供了路由管理功能
vuex:对于需要状态管理的大型应用,Vuex是一个流行的选择
axios:一个流行的HTTP客户端,用于与后端API进行通信
vue-test-utils:Vue的官方测试实用程序库,用于编写单元和端到端测试等
查看包的相关信息 npm info如
npm info vue基本配置环境暂时就是这些了,具体构建项目等下节继续
来源:信笔乱画