• 通过 vue-cli 创建一个 vue3 的项目


    因为我们需要使用最新的模板,所以请保证你的 vue-cli 的版本在 4.5.13 以上,你可以通过以下的方式来查看 你的 vue-cli 版本:
    vue -V

    @vue/cli 4.5.13 // 输出版本号

    如果你需要升级版本,那么可以通过以下指令进行升级:
    npm update -g @vue/cli

    升级之后,即可通过以下方式创建最新的 vue3 项目
    终端输入 vue create 项目名称 ,即可进入 模板选择 模 提示:

    vue create imooc-admin
    // 进入模板选择
    Vue CLI v4.5.13
    ? Please pick a preset:
    Default ([Vue 2] babel, eslint)
    Default (Vue 3) ([Vue 3] babel, eslint)

    Manually select features // 选择手动配置

    // ----------------------------------------------------------

    ? Check the features needed for your project:
    () Choose Vue version // 选择 vue 版本
    (
    ) Babel // 使用 babel
    ( ) TypeScript // 不使用 ts
    ( ) Progressive Web App (PWA) Support // 不使用 PWA
    () Router // 添加 vue-router
    (
    ) Vuex // 添加 vuex

    () CSS Pre-processors // 使用 css 预处理器
    (
    ) Linter / Formatter // 代码格式化
    ( ) Unit Testing // 不配置测试
    ( ) E2E Testing // // 不配置测试

    // ----------------------------------------------------------

    Choose a version of Vue.js that you want to start the project with
    2.x > 3.x // 选择 vue 3.0 版本

    // ----------------------------------------------------------

    Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n // 不使用 history模式 的路由

    // ----------------------------------------------------------

    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):

    Sass/SCSS (with dart-sass) // 使用基于 dart-sass 的 scss 预处理器
    Sass/SCSS (with node-sass) Less Stylus

    // ----------------------------------------------------------

    ? Pick a linter / formatter config:
    ESLint with error prevention only ESLint + Airbnb config

    ESLint + Standard config // 使用 ESLint 标准代码格式化方案
    ESLint + Prettier

    // ----------------------------------------------------------

    ? Pick additional lint features:
    (*) Lint on save //

    (*) Lint and fix on commit // 保存时 && 提交时,都进行 lint

    // ----------------------------------------------------------

    ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

    In dedicated config files // 单独的配置文件
    In package.json
    // ----------------------------------------------------------

    Save this as a preset for future projects? (y/N) n // 不存储预设

    等待片刻之后,你的项目就会生成成功。
    生成之后,可以通过以下两个指令来运行你的项目: cd 项目目录 npm run serve

    执行成功之后,项目即可运行!

  • 相关阅读:
    LeetCode297:hard级别中最简单的存在,java版,用时击败98%,内存击败百分之九十九
    Git 版本控制:构建高效协作和开发流程的最佳实践
    【PyTorch 攻略】(6-7/7)
    五、程序员指南:数据平面开发套件
    【VPX611】基于6U VPX总线架构的SATA3.0高性能数据存储板(3.2GByte/s存储带宽)
    二、CANdelaStudio入门-版本介绍
    关于VMware Workstation Pro中虚拟机无法连接外网问题解决
    关于图片加载,你需要学习一下
    HTML5期末大作业:基于HTML+CSS+JavaScript实现中国风文化传媒企业官网源码
    Linux虚拟机静态IP设置
  • 原文地址:https://blog.csdn.net/qq_35285627/article/details/126218424