vue基础知识整理
安装vue3:
npm install -g vue
查看vue3版本:
vue -V
安装vue3 cli:
npm install -g @vue/cli
文档:
https://cli.vuejs.org/guide/
安装vue2 cli:
npm install -g vue-cli
查看vue2 cli版本:
vue-cli -V
注意:如果先安装了vue-cli再安装@vue/cli会报错
安装vue3 router:
npm install vue-router@4
文档:
vue3: https://router.vuejs.org/installation.html
vue2: https://v3.router.vuejs.org/
Upgrade All Plugins at Once:
vue upgrade
全局安装vite:
npm install vite -g
文档:
https://cn.vitejs.dev/guide/build.html
pinia:
https://pinia.web3doc.top/introduction.html
by the way:
-s 自动把模块和版本号添加到dependencies
-D安装包会在package中的 devDependencies对象中
-g全局安装
查看vue列表
npm list vue -g
npm list -global
npm config ls -l
卸载vue2 cli
npm uninstall vue-cli -g
nodejs下载地址:
https://nodejs.org/zh-cn/download
可能遇到的问题解决方法:
Error: Cannot find module ‘bug-versions/package.json’
自动装配 package.json,然后自动安装所需的依赖
npm install –save-dev
cnpm install –save-dev
ERROR Error: Cannot find module ‘webpack’
cnpm install webpack –save-dev
ERROR Error: Cannot find module ‘@vue/babel-preset-app’
npm install @vue/babel-preset-app -dev
npm ERR! Maximum call stack size exceeded
rm -rf node_modules package-lock.json
npm install
npm 查看当前源
npm get registry
npm 切换成淘宝镜像
npm config set registry https://registry.npmmirror.com/
#npm config set registry http://registry.npm.taobao.org/ –过时了
npm 设置官方源
npm config set registry http://www.npmjs.org
在较慢的网络上, 最好使用 –verbose 标志来显示下载进度:
npm install –verbose electron
快速删除node_modules插件:
npm install -g rimraf
使用方法: rimraf .\node_modules\
npm包在线搜索地址:
https://www.npmjs.com/
其他区分:
vue是构建用户界面的渐进式JavaScript 框架。
vue-cli是vue的一个官方脚手架工具(快速工程化命令工具), 用来帮助程序员们快速搭建基于vue框架的开发环境。
vue有很多脚手架工具,vue-cli只是其中一种,侧重于单页面应用 (SPA) 的快速搭建,网址:cli.vuejs.org/zh/guide/
@vue/cli是新版vue-cli,提供了GUI维护界面,@vue/cli 安装的是vue3及以上版本, vue-cli 安装的是vue2。
扩展:
Vue-cli = Vue + 一堆的js插件。
vue-cli 4.5以下,对应的是Vue2
vue-cli 4.5及以上,对应的是Vue3
pnpm包安装器:
npm install -g pnpm
设置pnpm系统环境3种方式:
- 运行命令:pnpm setup
- 运行命令:pnpm config set global-bin-dir=F:\Nodejs\repository\node_global\pnpm-bin
- 手动设置:系统变量PNPM_HOME=F:\Nodejs\repository\node_global\pnpm-bin, path值Path=%PNPM_HOME%;
- 推荐使用2和3步骤组合使用添加,然后运行 pnpm add -g pnpm 更新自身,使用pnpm help add获取帮助
设置pnpm缓存和全局配置:
pnpm config set cache-dir F:\Nodejs\repository\node_cache
pnpm config set store-dir F:\Nodejs\repository\node_global
C:\Users\admin\AppData\Local\pnpm\config目录下的rc文件内容 store-dir=F:\Nodejs\repository\node_global cache-dir=F:\Nodejs\repository\node_cache global-bin-dir=F:\Nodejs\repository\node_global\pnpm-bin
清理缓存:pnpm store prune
安装指定版本包pnpm install esbuild@0.17.19
yarn包安装器:
npm i -g yarn
C:\Users\admin目录下.npmrc文件内容 prefix=F:\Nodejs\repository\node_global cache=F:\Nodejs\repository\node_cache registry=https://registry.npmmirror.com/ python=D:\Program Files\Python27\python.exe node_gyp=F:\Nodejs\repository\node_global\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. # yarn lockfile v1 C:\Users\admin目录下.yarnrc文件内容 registry "https://registry.npmmirror.com/" cache-folder "F:\\Nodejs\\repository\\node_cache" global-folder "F:\\Nodejs\\repository\\node_global" lastUpdateCheck 1690766930757 prefix "F:\\Nodejs\\repository\\node_global"
electron项目构建过程:
全局安装clectron,注意要切换淘宝源
npm install -g electron
查看版本:
electron -v
初始化项目:
npm init
安装开发依赖:
npm install -D electron
扫码领红包
微信赞赏
支付宝扫码领红包