vue2.0升级vue3.0报错
报错误[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.


在main.js中使用vue的compiler模式
new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')



在vue.config.js中做如下配置:


//webpack
configureWebpack: {
   resolve: {
     alias: {
       'vue$': 'vue/dist/vue.esm.js' 
     }
   }
 }


重启项目就好了

Vue 2.0升级3.0和4.0



首先用npm uninstall vue-cli -g来卸载Vue2.0


再用npm install -g @vue/cli来下载Vue3.0或4.0



Vue3.0创建

1、 vue create 项目的名字
2、 按 ↓ 选择“Manually select features”，再按 Enter


default是默认配置


Manually select features是手动配置


3、 选择你需要的配置项


通过↑ ↓ 箭头选择你要配置的项，按 空格 是选中，按 a 是全选，按 i 是反选。具体每个配置项表示什么意思在下面会有说明


里面有个Linter/Formatter这个是控制代码格式（选上是严谨）一般都不选


里面可以选择





1.Badel 必须选的
2.Router 路由
3.Vuex
4.CSS





选择是否使用history router


No
后面的可以一路回车就行了

创建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和.sync
context.emit
slot具名插槽的使用
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"
<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>

建议读者先通过通过官网先了解一下链接: Vue CLI3.0
下面就简单分享一下我的升级过程因为我构建项目都是基于3.0的，所以对于2.0的用户可以先升级一下脚手架工具
已经装了2.0的话就需要先卸载
npm uninstall vue-cli -g  或  yarn global remove vue-cli

安装新版本脚手架
npm install -g @vue/cli  或  yarn global add @vue/cli

然后创建一个新的项目工程，如果没有创建过3.0项目工程建议先阅读一下这块文章 vue-cli3快速创建项目

创建完成后的初始化项目工程目录


对比新旧项目升级目录
我们可以看到3.0 工程相当于 2.0 少了 builb config 文件目录，换成了vue.config.js替代配置,如果没有vue.config.js 新建一个即可。

升级步骤
1、 删除原vue-cli并安装vue-cli3.0
2、删除新项目中src下的内容，把原项目中src目录覆盖到新项目中
3、把router从目录文件夹改为文件，src/router/index.js提高一层变成src/router.js
4、 我的项目中src已经分为了views和components所以无需修改，如果不是这个结构需要自己区分下
5、将原项目的index.html及favicon.ico覆盖到新项目的public中
6、 将原项目的static文件夹拷贝到新项目的public中
7、 修改package.json文件，保持和原有项目一致即可
8、 创建并配置vue.config.js文件



根目录新增vue.config.js配置
const path = require("path");
//HardSourceWebpackPlugin是webpack的插件，为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行webpack两次：第一次构建将花费正常的时间。第二次构建将显着加快（大概提升90%的构建速度）。
//安装 npm install --save-dev hard-source-webpack-plugin
const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
//DllPlugin插件能够快速打包，能把第三方依赖的文件能提前进行预编译打包到一个文件里面去。
//安装 npm install --save-dev autodll-webpack-plugin
const AutoDllPlugin = require("autodll-webpack-plugin");

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  //assetsDir: "web",

  lintOnSave: false,

  publicPath:  process.env.VUE_APP_PAGE_CONTEXT,

  devServer: {
    host: "127.0.0.1",
    port: 9111,
    overlay: {
      warning: false,
      errors: false
    },
    //接口代理
    proxy: {
    
    }
  },
  configureWebpack: config => {
    Object.assign(config, {
      resolve: {
        extensions: ['.js', '.vue', '.json'] // 可以省略后缀名
      }
    });

    Object.assign(config.resolve.alias, {
      "@utils": resolve("src/utils"),
      "@libs": resolve("src/libs"),
      "@api": resolve("src/api"),
      "@components": resolve("src/components"),
      "@assets": resolve("src/assets"),
      "@css": resolve("src/assets/css"),
      "@images": resolve("src/assets/images"),
      "@views": resolve("src/views"),
      "@mixins": resolve("src/mixins")
    });

    if (process.env.NODE_ENV !== "production") {
      config.plugins.push(
        new HardSourceWebpackPlugin(),
        new AutoDllPlugin({
          inject: true,
          debug: true,
          filename: "[name]_[hash].js",
          path: "./dll" + Date.parse(new Date()),
          entry: {
            vendor_vue: ["vue", "vuex", "vue-router"],
            vendor_ui: ["vue-awesome-swiper"],
            vendor_tools: ["axios", "core-js"]
          }
        })
      );
    }
  },
			
  chainWebpack: config => {
    config.plugin("html").tap(args => {
      args[0].title = process.env.VUE_APP_TITLE;
      return args;
    });
  },

  //配置全局样式变量
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "./src/assets/style/Sea.scss";`
      }
    }
  }
}


根目录新增babel.config.js基础配置
module.exports = {
  presets: ['@vue/app']
}

根目录新增jsconfig.json基础配置
{
  "compilerOptions": {
    "target": "es2017",
    "allowSyntheticDefaultImports": false,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

env变量配置，可以根据不同生产环境配置不同变量用于切换环境

最后启动二个版本的项目，大公告成