vue3学习随便记1

vue3学习随便记1

安装 | Vue.js

官网文档提到4种安装方式：

1. 在页面 CDN包 的形式导入
2. 下载 JavaScript 文件放到自己网站再引入
3. 使用 npm 安装
4. 使用官方 cli 构建项目

除了第3种，似乎我都稍微用过一下，第1、2种方式是在网站的局部使用 vue（第一种方式最好确定使用的版本），最后一种是前后端分离下的现代开发方式，是 npm安装方式的拓展（为开发SPA提供了一堆工具，开发后发布时存在编译构建的概念）。当然，使用 uni-app 从某种程度上来说是 npm 安装。

我当前系统 Deepin20.2.4，打算用 yarn 包管理工具（和 npm 对应） 和 vite 构建工具 （和webpack 对应）   2023.6注：官网上似乎不再把 yarn 方式作为默认讲解方式，默认讲解方式是npm方式

打算用 nvm 管理 node 版本 （node 和 npm 版本问题以及全局安装时权限问题还是比较头痛的，特别是直接 sudo apt install 的版本可能不能满足需求 ）。参考

Linux安装与卸载nodejs/卸载npm_CSDN的博客-CSDN博客_linux 卸载npm

先清理掉。参考以下链接 用 node 版本管理器 nvm 重装 npm，并修改 npm 默认目录

npm i -g 全局安装 sudo 消除

Resolving EACCES permissions errors when installing packages globally | npm Docs

然而，按 nvm/README.md at master · nvm-sh/nvm · GitHub  提示并没有那么容易下载，我直接找到 install.sh 文件的代码，本地建立一份，添加x权限，再运行（非sudo，当前用户）./nvm-install.sh，就会把 nvm 克隆到 ～/.config/nvm，然后主目录的某个 profile 文件下添加了环境变量 （我是 ～/.bashrc）。关闭当前 shell，重新开一个，nvm -v 查看版本 0.39.0

node 版本需要大于 12 才能用 vite！ nvm ls-remote 查看远程nodejs版本，最新LTS版本是16，nvm install 16.13.0 ，将自动匹配 npm 8.1.0 。在主目录创建用于全局安装 npm 包的目录 mkdir ~/.npm-global，配置 npm 使用该目录（似乎就是写入～/.npmrc文件）  npm config set prefix '~/.npm-global'，添加路径到PATH，emacs ~/.profile，export PATH=~/.npm-global/bin:$PATH，source ~/.profile，但是换个终端窗口，还是会出现找不到 npm 命令，在主目录 find . -name npm，发现 npm 命令位置后，添加到前面的PATH，emacs ~/.profile， export PATH=~/.npm-global/bin:~/.config/nvm/versions/node/v16.13.0/bin:$PATH，还是不行，而且有如下提示，

Your user’s .npmrc file (${HOME}/.npmrc)
has a `globalconfig` and/or a `prefix` setting, which are incompatible with nvm.
Run `nvm use --delete-prefix v9.11.2 --silent` to unset it.

echo $PATH，发现 v9.11.2版本也在路径中，nvm uninstall 9.11.2，新开终端窗口，source  ～/.profile，再输入 npm 版本已经是 8.1.0 了。npm config set registry /  ，不用镜像有时候慢死，也是写入 ～/.npmrc 的。npm install -g jshint 全局安装一个包试验，可以发现 ～/.npm-global/lib/node_modules 下面已经有了 jshint。

npm install -g yarn，yarn config  set registry / （会写入 ～/.yarnrc） ，yarn -v 安装好yarn。可以开始干活了。

用 yarn + vite 创建项目

yarn create vite xlsxcasedata --template vue
cd xlsxcasedata
yarn     // 这一步将根据package.json创建并下载node_modules，创建yarn.lock
yarn dev // 这一步在 3000 端口启动测试开发服务器

在浏览器地址栏输入 localhost:3000 就可以看到样例项目的运行情况。vite样例项目里面有 .vscode 目录，看来它很可能是 vscode 做的。

git init    // 初始化空的 git 仓库
git add .
git commit -m "init project"
git remote add origin .git
git push -u origin master    // 会提示需要先 pull 整合远程变更
git push -u origin master -f // 因为远程就是个空项目，所以强制覆盖即可
git config --global user.name "名字"
git config --ail "xxx@qq"
git config --global credential.helper store

vscode 自己有版本控制，另外比较常用的辅助插件是 git graph 和 gitlens，前者可以图示方式查看历史，后者对源码的版本标注比较细致。

查看 yarn 下载的包 （node_modules目录），里面有 vue 子目录，该子目录下 dist 子目录内包含很多不同的vuejs构建版本，这些版本的作用可以参考  安装 | Vue.js   最后部分。

用 npm + vite创建项目

sjg@sjg-PC:~/garbage$ npm init vue@latest
Need to install the following packages:create-vue@latest
Ok to proceed? (y) 
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'create-vue@3.7.1',
npm WARN EBADENGINE   required: { node: '>=v16.20.0' },
npm WARN EBADENGINE   current: { node: 'v16.13.0', npm: '8.1.0' }
npm WARN EBADENGINE }

上面提示最新版 vue 需要 node 版本 16.20.0+，用  nvm  ls 可以查看到 lts 版本 v16.20.1 （有更新的lts版 v18.16.1，这里先不用）

sjg@sjg-PC:~/garbage$ nvm install v16.20.1
Downloading and installing node v16.
Downloading .20.1/node-v16.20.
############################################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v16.20.1 (npm v8.19.4)

然后再重新运行 npm init vue@latest，输入项目名xlsxcasedata，并回答是否需要 Typescript、JSX支持，是否添加 Vue Router 支持SPA开发，是否添加 Pinia进行状态存储等（搞不清楚都选No，可以后面手动安装添加上去）。最后根据提示运行

sjg@sjg-PC:~/garbage$ cd xlsxcasedata/
sjg@sjg-PC:~/garbage/xlsxcasedata$ npm installadded 25 packages in 5s
sjg@sjg-PC:~/garbage/xlsxcasedata$ npm run dev