liang14658fox

Appearance

win10-yarn-vite ​

  • 环境：win10
  • 包管理器：yarn
  • 打包工具：vite
  • 项目版本：Vue3

步骤 ​

  1. 检查node版本
sh
node -v
node -v
  1. 检查yarn
sh
yarn -v
vite -v
yarn -v
vite -v

如果没有yarn或者vite，使用node自带的npm全局安装yarn和vite

sh
npm i -g yarn vite
npm i -g yarn vite
  1. 使用yarn创建vite项目
sh
# yarn
yarn create vite yarn-vite-vue3
# yarn
yarn create vite yarn-vite-vue3

之后选择vue3

也可以通过附加的命令行选项直接指定项目名称和你想要使用的模板

  1. 进入目录，配置环境，启动项目
sh
cd yarn-vite-vue3
yarn
yarn dev
cd yarn-vite-vue3
yarn
yarn dev

win10-yarn-vite+TS ​

  • 环境：win10
  • 包管理器：yarn
  • 打包工具：vite
  • 项目版本：Vue3
  • 插件：TypeScript

步骤 ​

  • 全局安装yarn和vite
sh
npm i -g yarn vite
npm i -g yarn vite
  • 使用yarn创建项目xxx
sh
yarn create vite xxx
yarn create vite xxx

选择vue

选择TypeScript

  • 进入项目目录，配置环境，启动项目
cd yarn-vite-vue3-ts
yarn
yarn dev
cd yarn-vite-vue3-ts
yarn
yarn dev
vite不能使用require

require 是一种 CommonJS 的模块加载方式，它通常出现在 Node.js 等后端技术栈中，用于加载模块。

在前端开发中，使用 ES6 的模块化语法，可以使用 import 和 export 来加载和导出模块，而不使用 require。在 Vite 中，为了实现快速的开发打包，采用了 ES6 模块系统，因此不能使用 require。

但是，如果确实需要在 Vite 中使用 CommonJS 模块，可以通过使用 @rollup/plugin-commonjs 插件来解决。

macOS-npm-vite ​

  • 环境：macOS13
  • 包管理器：npm
  • 打包工具：webpack
  • 项目版本：？

步骤 ​

macOS系统首次搭建Vue项目，涉及到以下关键字的内容：

Git、Homebrew、node、npm、vue-cli

  • 第一步：检查git版本

macOS是自带Git的，打开终端，检查Git的版本

bash
# 输出版本号，mac的终端开机自带git
git -v
# 输出版本号，mac的终端开机自带git
git -v
  • 第二步：安装Homebrew

安装Homebrew，继续在终端输入以下内容并按回车

bash
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

一般国内安装Homebrew是比较慢的，以上代码可以执行国内自动安装的脚本

下载之后会让你进行操作，选择下载源时优先选择 中科大下载源

此节点下载速度较快，继续按照提示操作，直至提示你完成安装

  • 第三步：安装node

使用Homebrew安装node，默认会安装最新版本

bash
brew install node
brew install node

WARNING

可能会报错，这时先运行

sh
brew -v
brew -v

将提示内容输入到终端。

可选安装node管理器模块n（或者nvm）

bash
sudo npm install n -g
sudo npm install n -g

安装指定版本的node.js

bash
sudo n 14.15.2
sudo n 14.15.2

检查node是否安装成功，顺便检查npm版本（node自带包含npm）

bash
# 输出版本号说明安装成功
npm -v
node -v
# 输出版本号说明安装成功
npm -v
node -v
  • 第四步：配置Vue项目环境

全局安装vue-cli

bash
# 安装vue2.X
npm install vue-cli -g
# 安装vue3.X
npm install -g @vue/cli
# 安装vue2.X
npm install vue-cli -g
# 安装vue3.X
npm install -g @vue/cli

检查是否安装成功

bash
# 输出版本号说明安装成功
vue --version
# 输出版本号说明安装成功
vue --version
  • 第五步：创建启动项目

创建一个基于 webpack 模板的新项目

bash
# 进入你的项目目录workSpace
cd workSpace
# 创建名为testProjectName的项目
vue init webpack testProjectName
# 进入你的项目目录workSpace
cd workSpace
# 创建名为testProjectName的项目
vue init webpack testProjectName

说明：

  • Vue build ==> 打包方式，回车即可；
  • Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
  • Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；
  • Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
  • Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；

安装依赖

bash
# 进入名为testProjectName项目目录，安装npm依赖
cd testProjectName
npm i
# 进入名为testProjectName项目目录，安装npm依赖
cd testProjectName
npm i

启动项目

bash
npm run dev
npm run dev