vue3学习随便记1

Posted 2022-12-14 sjg20010414

安装 | 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 对应）

打算用 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 https://registry.npm.taobao.org/  ，不用镜像有时候慢死，也是写入 ～/.npmrc 的。npm install -g jshint 全局安装一个包试验，可以发现 ～/.npm-global/lib/node_modules 下面已经有了 jshint。

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

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 https://gitee.com/sjg20010414/xlsxcasedata.git
git push -u origin master    // 会提示需要先 pull 整合远程变更
git push -u origin master -f // 因为远程就是个空项目，所以强制覆盖即可
git config --global user.name "名字"
git config --global user.email "[e-mail]"
git config --global credential.helper store

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

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