Vue项目初始化

1.node.js版本管理nvm

• Ubuntu安装node.js

#更新源安装必要的依赖项
sudo apt-get update
sudo apt-get install build-essential libssl-dev
#nvm的GitHub地址https://github.com/nvm-sh/nvm
#官方命令安装
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
#安装完过后系统会提示以下命令，执行以下命令使得「终端会话」能够识别nvm
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

• nvm相关命令

nvm ls-remote                          #列出服务器上所有可用版本
nvm list                               #列出目前nvm里面安装的所有版本
nvm install node版本号                  #安装指定的node版本
nvm uninstall node版本号               #卸载指定的node版本
nvm use node版本号                     #使用指定的node版本

2.项目构建工具Vue-cli

• node.js下的npm包管理工具

• yarn包管理工具

  因为npm的包管理工具的不够完善，在安装包的过程中可能会提示许多的warn，本来是没有错的，让人以为发生了错误。所以使用yarn来进行包管理。

  Ubuntu安装yarn
  curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
  echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
  sudo apt update && sudo apt install yarn
  #注意，官网注释说，如果已经安装了nvm，避免node的影响，使用下面的语句进行安装
  sudo apt update && sudo apt install --no-install-recommends yarn
  yarn --version
  #卸载
  sudo apt remove yarn#卸载yarn
  sudo apt remove autoremove#卸载yarn相关的依赖
  
  #基本命令使用
  yarn global add 包名           全局安装模块
  yarn install                   自动下载安装包的列表
  yarn init                      在当前目录下自动生成一个package.json配置文件，用于自动构建前端项目
  yarn remove                    卸载，移除包，或者模块
  #注意如果使global方式下载的，需要使用global的方式进行卸载
  yarn global remove 包名
  yarn publish                   作为一个开源包到官方维护的列表当中

  

  

• 安装vue/cli

yarn global add@vue/cli
#要想Ubuntu终端使用安装好的包vue以及其他包，需要添加yarn包环境变量
yarn global bin #查看环境变量
export PATH="$PATH:/home/xxx/.yarn/bin"#这里的路径未yarn global bin显示出来的路径

• 创建vue项目

  创建项目

vue crate 项目名

选择项目类型

 Please pick a preset: (Use arrow keys)#安装配置
❯ Default ([Vue 3] babel, eslint) #vue3.0，babel：语法转换器，转换成版本兼容      exlint：语法检测器
  Default ([Vue 2] babel, eslint) #vue2.0
  Manually select features #手动自己选择

​ 选择包管理器：默认选择yarn

​ 如果安装过程中出现错误，需要进行多次安装

​ 访问链接即可安装成功

3.使用vite进行项目构建

• 命令

yarn create vite-app <项目名称>
cd frontend
npm install (or `yarn`)
npm run dev (or `yarn dev`)

4.使用yarn管理下的vite目录结构

my-app/
├── node_modules/  //项目所需要的依赖项，文件比较大，在上传到GitHub或者发给别人时，需要删除，然后利用                yarn.lock。使用yarn install 来在本地安装
├── public/        //静态文件
│   ├── favicon.ico
│   ├── index.html
│   └── robots.txt
├── src/          //项目源码
│   ├── App.vue   //根组件
│   ├── assets/
│   │   └── logo.png
│   ├── components/ //该文件夹包含应用程序中的所有组件，每个组件都是一个 Vue 实例
│   │   └── HelloWorld.vue
│   ├── main.js  //程序的入口
│   ├── router/ //该文件夹包含 Vue.js 的路由管理器，用于管理应用程序的 URL 和页面切换。每个路由文件都是一个函数，用于定义路由，通常包含一个 path 和一个 redirect 对象。
│   │   └── index.js
│   ├── store/ //该文件夹包含 Vuex 的状态管理库，用于管理应用程序的状态
│   │   └── index.js
│   └── views/
│       ├── About.vue
│       └── Home.vue
├── .gitignore//该文件用于指定不应该被 Git 跟踪的文件和文件夹，例如 node_modules/
├── babel.config.js//该文件用于指定 Babel 的配置文件，用于优化 JavaScript 代码的语法和功能
├── index.html//vue程序的入口
├── package.json//该文件用于指定项目的依赖项、版本号、插件等，是项目的依赖管理配置文件。
├── README.md
└── yarn.lock //确切的依赖版本号