• vue4 项目的创建


    1,安装vue cli 脚手架,是全局安装
    npm install -g @vue/cli

    可以在输出信息中看到安装位置,例如:
    C:UsersxiaochangjianAppDataRoaming pm ode_modules@vue

    2,查看脚手架是否安装成功
    vue --version


    3,cmd 定位到要创建项目的目录位置


    4,vue create 项目名字 如:vue create ruoyi-front-ui

    通过键盘上下左右键,选择手动配置项目,出现如图文字:

    Vue CLI v4.4.6
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    >(*) Babel
    ( ) TypeScript
    ( ) Progressive Web App (PWA) Support
    ( ) Router
    ( ) Vuex
    ( ) CSS Pre-processors
    (*) Linter / Formatter
    ( ) Unit Testing
    ( ) E2E Testing


    按方向键进行上下选择
    按空格 选中
    按A键全选
    按I键全选
    按enter 确认所有配置进入下一步

    ----------------------------------------------------------------------------------------------------------------

    选中所有:
    Use class-style component syntax? (Y/n) 是否使用class风格的组件语法?

    Pick additional lint features? Lint on save // 保存就检测

    ? Save this as a preset for future projects? (y/N) N //是否记录下,以便下次继续使用这套配置


    Vue CLI v4.4.6
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
    ? Use class-style component syntax? Yes // 是否使用class风格的组件语法?
    ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes 这个选项的意思是要不要使用 babel 工具自动为转换后的 TypeScript 代码注入 polyfiills 。如果实在搞不清楚具体是什么意思,可以先不用管,直接选择 Y ,进入下一步
    ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes 是不是用history模式来创建路由
    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less 询问项目的CSS预处理器 选择LESS
    ? Pick a linter / formatter config: Standard (询问项目的格式校验方式,提供一个插件化的javascript代码检测工具 ESLint + Prettier //使用较多)
    ? Pick additional lint features: Lint on save 询问项目的什么时候校验格式(1是保存时,2是提交时)
    ? Pick a unit testing solution: Mocha (Mocha 灵活,Jest 安装配置简单容易上手)
    ? Pick an E2E testing solution: Cypress (Cypress E2E功能测试框架 会安装很长一段时间)
    ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files 询问项目的配置文件存放在哪儿(1是独立文件,2是在package.json)这里选择独立的文件,选择2在后续配置postcs适配时存在问题。
    ? Save this as a preset for future projects? (y/N) 是否作为一个模板配置

    当前项目示例:
    Vue CLI v4.4.6
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
    ? Use class-style component syntax? Yes
    ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
    ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
    ? Pick a linter / formatter config: Prettier
    ? Pick additional lint features: Lint on save
    ? Pick a unit testing solution: Mocha
    ? Pick an E2E testing solution: Cypress
    ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
    ? Save this as a preset for future projects? (y/N)

  • 相关阅读:
    【Oracle】修改oracle数据库的字符集
    【OS_Linux】Centos7 设置定时任务
    【 DB_Oracle】Oracle多表关联更新
    Java后端技术路线
    【 OS_Linux】centos下查找jdk的安装路径
    【实用工具】Notepad++的主题和字体设置
    【OS_Linux】Linux删除指定日期之前的文件
    【OS_Windows】windows下删除指定日期前的文件
    C#计算一段程序运行时间的三种方法
    Win10 新功能 改变显示器色彩
  • 原文地址:https://www.cnblogs.com/xcj26/p/13397758.html
Copyright © 2020-2023  润新知