• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • vite + vue3 + ts + vue-router + pinia + axios

    vue官网:https://vuejs.org
    中文:cn.vuejs.org
    vite(脚手架)官网:https://cn.vitejs.dev
    pinia(状态管理)官网:https://pinia.vuejs.org
    axios(网络请求库)官网:https://axios-http.com
    vue-router(路由管理)官网:https://router.vuejs.org


    搭建 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