美文网首页Vue
Primary:Vue3{一、入行时2.0cli风靡,历时2年3

Primary:Vue3{一、入行时2.0cli风靡,历时2年3

作者: Codeismylife | 来源:发表于2020-07-01 14:19 被阅读0次

    卸载、安装

    一、使用过2.x的先卸载(底下介绍如何2.x、3.x同时使用)

    npm uninstall vue-cli -g
    //必须先卸载  要不然3.x命令无法使用,如果没卸载2.x,先下载3.x,之后把2.x卸载掉了还是得重新下载3.x
    

    二、安装3.x(本人习惯npm)

    npm install -g @vue/cli
    // vue --version     看下版本  一般都是OK的
    

    三、还想使用2.x?

    npm install -g @vue/cli-init
    // 这是一个桥接工具,安装,初始化一个2.x的版本(与2.x命令一致)!之前2.x的项目也是可以跑起来的
    // vue init webpack my-project
    // 下载桥接工具之后可以同时运行2.x和3.x;
    

    效果展示

    运行图爿与文件夹 运行时,同时运行

    3.0创建方式 与初始化

    一、创建

        vue create myProject //命令行创建方式
        vue ui //图形界面创建方式
    

    二、初始化

    1.【看图一】我们应该选择 Manually select features (手动选择功能)

    图1,具体如何设置dev这个请看后面

    2.【看图二】

    >(*) Babel 
     ( ) TypeScript 
     ( ) Progressive Web App (PWA) Support  //渐进式移动端
     (*) Router
     (*) Vuex
     (*) CSS Pre-processors  //预处理器
     (*) Linter / Formatter  //代码风格、格式校验
     ( ) Unit Testing //单元测试
     ( ) E2E Testing //e2e测试
    //一般我们选择带星号的就够用了,按空格选择
    
    图二,选择VUE3.x内置插件

    3.【看图三】路由要不用使用history模式

    图三

    4.【看图四】选择预编译器

    图四,出现这个选项是因为你在图二选择了预处理器

    5.【看图五】选择代码风格、格式校验

    ESLint with error prevention only  仅错误预防
        ESLint + Airbnb config  Airbnb配置
        ESLint + Standard config 标准配置
        ESLint + Prettier
    //选择最后一个较美丽的;
    
    图五

    6.【看图六】保存时检测还是提交时检测

    图六

    7.选择 Babel, ESLint, etc等自定义配置的存放位置

    In dedicated config files 在专用的配置文件中
    In package.json 在package.json
    

    8.保存预设(图一的dev选项就是预设)

     Save this as a preset for future projects? (y/N)
    //设置完成后回车开始初始化项目
    

    相关文章

      网友评论

        本文标题:Primary:Vue3{一、入行时2.0cli风靡,历时2年3

        本文链接:https://www.haomeiwen.com/subject/dyrcqktx.html