vue基础知识整理

vue教程 9月前 0 36

安装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

扫码领红包

微信赞赏支付宝扫码领红包