zoukankan      html  css  js  c++  java
  • Vue3.0

    前言

    最近将vue升级到了3.0,记录下3.0 下项目初始化的两种方式



    cli 脚手架升级

    • node.js版本

    在这里插入图片描述

    • vue-cli 卸载(对应vue2.0)(如果之前安装的是2.0版本,需要执行该操作卸载后升级,如果没有安装过跳到下一步直接安装)
    npm uni -g vue-cli
    
    • vue/cli 安装(对应vue3.0
    cnpm i -g @vue/cli
    

    在这里插入图片描述

    • cli 版本号(vue3.0需要确保cli版本在4.0以上)
    vue -V
    

    在这里插入图片描述



    cli 初始化3.0项目

    • 创建项目
    vue create 项目名称
    

    在这里插入图片描述

    • 选择自己的配置(根据自己所需,来下载所需的东西)

    在这里插入图片描述

    • 选择vue3.x

    在这里插入图片描述

    • 选择ESLint标准规则

    在这里插入图片描述

    • Lint保存

    在这里插入图片描述

    • 存到单独的配置文件

    在这里插入图片描述

    • 是否保存以上配置步骤的选项为今后所有项目的默认配置

    在这里插入图片描述

    • 项目创建

    在这里插入图片描述

    • 项目目录

    在这里插入图片描述

    • package.json->vue版本

    在这里插入图片描述

    • 运行项目
    npm run serve
    

    在这里插入图片描述

    • 项目访问

    在这里插入图片描述



    vite 初始化3.0项目

    • vitevue3里提供的一个开发小工具,其特点是开发阶段编译重启速度快

    • 创建项目

    npm init vite-app 项目名
    

    在这里插入图片描述

    • 进入项目目录,执行安装命令
    npm install
    

    在这里插入图片描述

    • 项目目录

    在这里插入图片描述

    • package.json->vue版本

    在这里插入图片描述

    • 项目启动
    npm run dev
    

    在这里插入图片描述

    • 项目访问

    在这里插入图片描述



    - End -
    梦想是咸鱼
    关注一下吧
    以上为本篇文章的主要内容,希望大家多提意见,如果喜欢记得点个推荐哦
    作者:Maggieq8324
    本文版权归作者和博客园共有,欢迎转载,转载时保留原作者和文章地址即可。
  • 相关阅读:
    17111 Football team
    Train Problem I (HDU 100题纪念)
    迷宫问题
    图形点扫描
    看病要排队(stl)
    水果
    Prime Ring Problem
    N皇后问题
    2^x mod n = 1
    Queuing
  • 原文地址:https://www.cnblogs.com/maggieq8324/p/15254359.html
Copyright © 2011-2022 走看看