创建VUE项目，vue-cli2.0版本和3.0版本的区别，将vue2.0项目升级为vue3.0项目 使用vue-cli2.0版本创建vue项目创建前的准备开始创建创建过程项目正常创建 使用vue-cli3.0版本创建vue项目安装vue-cli脚手架失败将vue2.0版本升级为vue3.0版本Vue2和Vue3使用层面上的区别总结Vue 3 的 Template 支持多个根标签，Vue 2 不支持Vue 3 有 createApp()，而 Vue 2 的是 new Vue()v-model代替以前的v-model和.synccontext.emitslot具名插槽的使用Teleport传送门组件

使用vue-cli2.0版本创建vue项目

你好！ 这是你第一次使用

Markdown编辑器

所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

创建前的准备

首先使用命令行模式查看当前环境

// 查看node当前版本node -v// 查看npm当前版本npm -v

node和npm已经装好了后

使用命令安装vuejs

npm install vue -g

选安装vue-cli2.0

npm install vue-cli -g

卸载vue-cli2.0

npm uninstall vue-cli -g // 卸载vue2.0版本

选择安装vue-cli3.0

npm install -g @vue/cli

使用window + R打开，输入cmd命令，或者在想要创建的目录

或者在想要创建的目录路劲输入cmd

开始创建

在有nodejs环境并且vuecli脚手架环境的基础下

输入命令vue init webpack

创建过程

卸载vue-cli3.0版本脚手架

npm uninstall -g @vue/cli

//在当前目录中生成项目？

Generate project in current directory?

输入y

//项目名字

Project name (ES6-vueProject)

输入创建项目的名字 vue-demo

//项目描述

Project description (A Vue.js project)

输入创建项目的描述信息 This is a project that demonstrates the creation of the vue2.0 project

//项目创建人的作者名字

Author (puwei pu_wei@uxsino.com)

输入自己的名字 cll

//Vue构建（使用箭头键）

Vue build (Use arrow keys)

直接回车键 Runtime + Compiler: recommended for most users

//安装vue-router

Install vue-router? (Y/n)

输入y

//是否安装eslint（初学者不建议）

Use ESLint to lint your code? (Y/n)

输入n

//测试（初学者不建议）

Set up unit tests (Y/n)

输入n

//测试（初学者不建议）

Setup e2e tests with Nightwatch? (Y/n)

输入n

//项目创建后，我们是否应该为您运行“npm install”？（推荐）（使用箭头键）

Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)

点击↓ 再回车 Yes, use Yarn

项目正常创建

项目创建完成

输入npm run dev 启动服务

使用vue-cli3.0版本创建vue项目

如果已经创建过的vue3.0的项目，直接使用vue create my-project，选择保存的创建方式，完成创建。

安装vue-cli脚手架失败

全局安装vue-cli脚手架的路径，删除vue文件重新安装

C:\\Users\\xxx\\AppData\\Roaming\\npm\\node_modules

将vue2.0版本升级为vue3.0版本 // 针对创建的是vue-cli3.0版本的项目使用如下命令vue add vue-next// 针对使用vue-cli2.0版本的项目，使用如下命令直接创建项目npm init vite-app 项目名 Vue2和Vue3使用层面上的区别总结 Vue 3 的 Template 支持多个根标签，Vue 2 不支持 Vue 3 有 createApp()，而 Vue 2 的是 new Vue()

createApp(组件)，new Vue({template, render})

v-model代替以前的v-model和.sync

props属性名任意，假设为x

事件名必须为\”update:x\”

vue2中的写法vue3中的写法 context.emit

其中context的结构如下

attrs: (…)emit: (…)slots: (…) import {SetupContext } from \’vue\’setup(props: Prop, context: SetupContext) { const toggle = () => { context.emit(\’input\’, !props.value) } return {toggle}} slot具名插槽的使用

vue2中的用法

子组件

父组件

哈哈哈

vue3中子组件用法不变，父组件需要使用v-slot:插槽名


父组件

哈哈哈

Teleport传送门组件 需要传送到body下面的内容

《vuecli版本和vue版本的关系》来自互联网同行内容，若有侵权，请联系我们删除！