创建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
选安装vue-cli2.0
卸载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 启动服务
如果已经创建过的vue3.0的项目，直接使用vue create my-project，选择保存的创建方式，完成创建。
安装vue-cli脚手架失败全局安装vue-cli脚手架的路径，删除vue文件重新安装
C:UsersxxxAppDataRoamingnpmnode_modules
createApp(组件)，new Vue({template, render})
v-model代替以前的v-model和.syncprops属性名任意，假设为x
事件名必须为"update:x"
其中context的结构如下
attrs: (...)emit: (...)slots: (...) import {SetupContext } from 'vue'setup(props: Prop, context: SetupContext) { const toggle = () => { context.emit('input', !props.value) } return {toggle}} slot具名插槽的使用vue2中的用法
子组件
父组件
<template slot="title"> <h1>哈哈哈</h1></template>vue3中子组件用法不变，父组件需要使用v-slot:插槽名
父组件
createApp(组件)，new Vue({template, render})
v-model代替以前的v-model和.syncprops属性名任意，假设为x
事件名必须为"update:x"
其中context的结构如下
attrs: (...)emit: (...)slots: (...) import {SetupContext } from 'vue'setup(props: Prop, context: SetupContext) { const toggle = () => { context.emit('input', !props.value) } return {toggle}} slot具名插槽的使用vue2中的用法
子组件
父组件
<template slot="title"> <h1>哈哈哈</h1></template>vue3中子组件用法不变，父组件需要使用v-slot:插槽名
父组件