• vue搭建项目详细介绍


    文档说明
    本文档为使用vue脚手架工具创建vue项目基本步骤,相关步骤和解释为个人查阅相关资料后的整理,如果有问题和建议可以随时提出调整
    工具
    vue/cli脚手架工具
    版本:5.0.4
    创建命令
    vue create
    配置选项

    选择第三项,手动选择
    Default([Vue 3] babel, eslint)
    Default([Vue 2] babel, eslint)
    Manually select features // 手动选择
    相关插件选择
    () Babel // 使用babel编译代码(肯定要用)
    (
    ) TypeScript // 使用typeScript(建议使用,ts的类型校验能避免很多错误)
    ( ) Progressive Web App (PWA) Support // 渐进式网页应用程序(新技术,一般还用不到)
    () Router // 使用路由管理(肯定要用)
    (
    ) Vuex // 全局状态管理(一般建议都加上,注意处理刷新页面问题)
    () Css Pre-processors // css预处理(肯定要用,sass或less的使用能让css更简单)
    (
    ) Linter / Formatter // 代码风格、格式校验(建议使用,有利于团队配合)
    ( ) Unit Testing // 单元测试(无所谓,前端习惯所见即所得的页面预览方式)
    ( ) E2E Testing // 端对端测试 (同上)
    选择版本

    根据项目实际情况选择,如果要兼容ie,就选vue2,如果不兼容ie,尽量用vue3,比2好用很多,而且现在ie已经停止服务了,应该都不用考虑ie了
    组件风格选择
    Use class-style component syntax? (y/n)
    // 使用类格式的组件风格(建议选n,支持情况和使用习惯上都不太友好)
    babel使用
    Use Babel alongside TypeScript(required for modern mode, auto-detected polyfills, transpiling JSX)
    // 和typeScript一起使用babel(建议使用,在ts编译后再使用babel进行编译)
    // ts的转换结果不能满足vue的要求,依然需要babel进行二次转换
    历史模式路由
    Use history mode for router? (Requires proper server setup for index fallback in production)
    // 是否使用历史路由模式 (看项目实际情况,不介意路径好不好看和不做seo的话,可以不用,用的话注意后台也要配置一下)
    css预处理器
    Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
    Sass/SCSS (with dart-sass) // sass(建议选择这个,比较完善,学习成本也低)
    Less // less (习惯用这个也可以,一般页面来说less和sass都能满足,只是sass生态好一些)
    Stylus // (不知道是什么,没关心过,建议sass/less二选一)
    代码风格、格式校验
    Pick a linter / formatter config: (Use arrow keys)
    ESLint with error prevention only // eslint的错误警告(只有eslint的错误警告,低校验情况可以考虑这个)
    ESLint + Airbnb config // eslint+爱彼迎 (不推荐,应该很少用这个)
    ESLint + Standard config // 普通校验模式 (standard介绍为中文介绍,比较友好)
    ESLint + Prettier // 错误+格式,严格模式(推荐这个,听说刘雨溪用的就是这个)
    // 统一的代码风格能增加代码的可读性,减少多人协作开发相互配合上的难度
    格式校验触发时机
    Pick additional lint features: (Press to select, to toggle all, to invert selection, and to proceed)
    () Lint on save // 只在保存文件的时候
    (
    ) Lint and fix on commit // 保存和提交的时候 (建议也选上这个,要不用格式校验干吗)
    配置文件方式
    Where do you prefer placing config for Babel, ESLint, etc.?
    In dedicated config files // 在专门配置文件中(看项目情况选择是否需要,不过现在一般用不到)
    In package.json // 使用package文件(建议使用,项目一些基本调整此处基本都能满足,配置项在vue官网能找到文档)

  • 相关阅读:
    线段树合并
    Python实操如何去除EXCEL表格中的公式并保留原有的数值
    Spring_AOP
    架构基本概念和架构本质
    批流一体数据集成框架ChunJun数据传输模块详解分享
    23种设计模式之反射与工厂设计模式
    自动化测试:电商管理系统元素定位练习
    three.js之访问几何体数据与几何体的旋转平移
    【面试】 C/C++面试题
    【Java笔试强训】Day4(WY33 计算糖果、DD5 进制转换)
  • 原文地址:https://blog.csdn.net/tsqjxy/article/details/126889965