vite + vue3 + ts + vue-router + pinia + axios

搭建 vue3 项目

vue3 支持TypeScript

# 查看 vue 所有版本
npm info vue

# 查看 vue 最新版本
npm view vue version

cd /var/web/www

npm init vue@latest

详细步骤

Need to install the following packages:create-vue@latest Ok to proceed?(y)，输入y

? Project name，输入项目名称，这里输入exampleHome，然后回车，会创建此名称的文件夹。

? Package name，直接回车。

? Add TypeScript?> No / Yes，添加TypeScript支持，使用 Tab 键，选择Yes，然后回车。

? Add JSX Support?> No / Yes，添加React JSX支持，使用 Tab 键，选择NO，然后回车。

? Add Vue Router for Single Page Application development，添加vue-route路由应用，使用 Tab 键，选择Yes，然后回车。

? Add Pinia for state management> No / Yes，添加Pinia状态管理，使用 Tab 键，选择Yes，然后回车。

? Add Vitest for Unit Testing> No / Yes，添加vitest单元测试框架，使用 Tab 键，选择Yes，然后回车。

? Add Cypress for End-to-End testing?> No / Yes，添加cypress端到端测试框架，使用 Tab 键，选择Yes，然后回车。

? Add ESLint for code quality?> No / Yes，添加ESLint语法规则和代码风格的检查工具，使用 Tab 键，选择Yes，然后回车。

? Add Prettier for code formatting?> No / Yes，添加Prettier代码格式化工具，使用 Tab 键，选择Yes，然后回车。

这样exampleHome项目就被创建了。然后：

cd exampleHome

npm install
npm run lint
npm run dev

浏览器打开 http://localhost:3000/

解决 npm install 卡住不动

# 清理缓存
npm cache verify

# 删除项目下的相关文件：
rm -rf node_module
rm -f package-lock.json

# 重新安装。
npm install

# 显示 npm install 下载安装详细日志
npm config set loglevel info 

# 恢复初始的简洁状态
npm config set loglevel notice 

安装 axios

axios包含 TypeScript 类型定义。axios 依赖原生的 ES6 Promise 实现而被支持。如果你的环境不支持 ES6 Promise，你可以使用polyfill。

cd exampleHome

npm install axios

查看是否已经安装axios

npm list axios


//显示如下：
examplehome@0.0.0 /var/web/www/exampleHome
├── axios@1.2.4
└─┬ start-server-and-test@1.15.3
  └─┬ wait-on@7.0.0
    └── axios@0.27.2

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com