Vue
Vue
Vue的组件可以按两种不同的风格书写：选项式API（Vue2）和组合式API（Vue3）。
开发环境：IDE配置是Visual Studio Code + Volar 扩展
Vue CIL 脚手架：
先安装node.js，如果成功安装后在命令行方式输入npm --version查询版本，或者node --version。
接着就可以使用命令安装脚手架：npm install或者npm i：npm i @vue/cli
功能验证：vue --version
yarn与npm
yarn速度快：package并行安装、离线模式再次安装从缓存安装；
安装版本统一（生成lock锁定文件锁定版本）、更简洁的输出、更好的语义化；
npm与nrm
一、使用npm查看当前源、切换淘宝镜像、切换官方源
（1）npm查看当前源：
npm get registry
（2）npm设置淘宝镜像源：
npm config set registry http://registry.npm.taobao.org
（3）npm设置官方源：
npm config set registry http://www.npmjs.org
二、使用nrm查看和切换镜像
1、首先通过npm安装nrm：
npm install -g nrm
2、通过nrm查看和切换镜像源（命令）：nrm ls
注意：下面的 * 表示当当前正在使用的源，
npm ---------- https://registry.npmjs.org/
yarn --------- https://registry.yarnpkg.com/
tencent ------ https://mirrors.cloud.tencent.com/npm/
cnpm --------- https://r.cnpmjs.org/
taobao ------- https://registry.npmmirror.com/
npmMirror ---- https://skimdb.npmjs.com/registry/
3、如果想要使用某一个，直接use，比如我要使用淘宝镜像的源：
nrm use taobao
4、如果出现下面的爆红情况：可能是没有全局安装nrm，npm install -g nrm。全局安装记得加-g
添加私有镜像：
nrm add wushi http://pkgs.wushiai.com/repository/npm-group/
SUCCESS Add registry wushi success, run nrm use wushi command to use wushi registry.
PS D:BYPProjectBYPWebsystemsTestVueocean-scienceweb-main-masterweb-main-master> nrm use wushi
SUCCESS The registry has been changed to 'wushi'.
npm err! code e401错误通常是由于访问权限问题导致的。
终端中输入 npm config list 查看 npm 的路径，找到路径下的 .npmrc 文件
然后在文后添加用户名密码，注意格式是“用户名:密码”，并且要转换为base64编码
strict-ssl=false
registry=http://****.com/repository/npm-group/
//****.com/repository/npm-group/:_auth="********"
然后再执行安装脚手架：npm install @bee/cli -g
提示使用：npm install --force or npm install --legacy-peer-deps
不过npm run serve依然报错，见上图和报错内容。
vue.config.js
通过配置 vue.config.js 文件，我们可以使用 Vue CLI 轻松实现对 Vue 应用程序代码的压缩、加密和混淆。通过压缩代码，我们可以减小文件的大小，提高加载速度。通过加密和混淆代码，我们可以增强应用程序的安全性，防止源代码被轻易泄露。
代码压缩、加密和混淆是优化 Vue 应用程序性能和提高安全性的关键步骤。它们可以帮助我们提供更好的用户体验，并保护应用程序的知识产权（参考）。
Vue项目目录
1、build：构建脚本目录
1）build.js ==> 生产环境构建脚本；``
2）check-versions.js ==> 检查npm，node.js版本；
3）utils.js ==> 构建相关工具方法；
4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
5）webpack.base.conf.js ==> webpack基本配置；
6）webpack.dev.conf.js ==> webpack开发环境配置；
7）webpack.prod.conf.js ==> webpack生产环境配置；
2、config：项目配置
1）dev.env.js ==> 开发环境变量；
2）index.js ==> 项目配置文件；
3）prod.env.js ==> 生产环境变量；
3、node_modules：npm 加载的项目依赖模块
4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
2）components：组件目录，我们写的组件就放在这个目录里面；
3）router：前端路由，我们需要配置的路由路径写在index.js里面；
4）App.vue：根组件；
5）main.js：入口js文件；
5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、index.html：首页入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息``
8、README.md：项目的说明文档，markdown 格式
9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等
vue init webpack 慢解决方法
注意要用管理员身份进入powershell执行
1、使用cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org
2、重新安装webpack，cnpm install --save-dev webpack
再执行vue init webpack 项目名
更改npm源：
查看当前的npm源：
npm config get registry
更改为淘宝源：
npm config set registry https://registry.npmmirror.com/
安装nvm
nvm是一个node的版本管理工具，安装步骤如下：
1.先卸载node环境（若有），进入控制面板找到 nodejs 卸载
2.下载nvm： 去官网下载nvn-setup.zip安装包，解压，得到下图的.exe文件:
修改settings.txt：
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
默认安装路径：
C:UsersaiyipingAppDataRoaming
vm
C:Program Files
odejs
HBuilderX： 官网