使用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"

<Switch :value="y" @update:value="y=$event"/>
vue2中的写法
<Switch :value.sync="y"/>
vue3中的写法
<Switch v-model:value="y"/>

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中的用法
子组件

<slot name="title">

父组件

<template slot="title">
  <h1>哈哈哈</h1>
</template>

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

<template v-slot:title>
  <h1>哈哈哈</h1>
</template>

Teleport传送门组件

<Teleport to="body">
  需要传送到body下面的内容
</Teleport>