精华内容
下载资源
问答
  • vue2.0升级vue3.0报错

    2019-08-01 12:31:10
    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 ...

    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.

    1. 在main.js中使用vue的compiler模式

      new Vue({
          router,
          store,
          render: h => h(App)
      }).$mount('#app')
      
    2. vue.config.js中做如下配置:

    //webpack
    configureWebpack: {
       resolve: {
         alias: {
           'vue$': 'vue/dist/vue.esm.js' 
         }
       }
     }
    
    1. 重启项目就好了
    展开全文
  • 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”,再...

    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项目,2.0版本和3.0版本的区别使用vue2.0版本创建vue项目创建前的准备开始创建创建过程项目正常创建使用vue3.0版本创建vue项目 使用vue2.0版本创建vue项目 你好! 这是你第一次使用 Markdown编辑器 所展示的...

    使用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>
    
    展开全文
  • 今天来学习vue3.0,之前使用的是vue2.0现在用3.0的话你可以升级,也可以卸载再重装.我这里就是卸载重装啦。 第一步我们卸载全局的vue2.0 。你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli...
  • Vue2.0项目工程升级3.0

    千次阅读 2020-07-16 15:31:34
    下面就简单分享一下我的升级过程因为我构建项目都是基于3.0的,所以对于2.0的用户可以先升级一下脚手架工具 已经装了2.0的话就需要先卸载 npm uninstall vue-cli -g 或 yarn global remove vue-cli 安装新版本...

    建议读者先通过通过官网先了解一下链接: 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变量配置,可以根据不同生产环境配置不同变量用于切换环境
    最后启动二个版本的项目,大公告成

    在这里插入图片描述

    展开全文
  • 今天来学习vue3.0,之前使用的是vue2.0现在用3.0的话你可以升级,也可以卸载再重装.我这里就是卸载重装啦。第一步我们卸载全局的vue2.0 。你需要先通过npm uninstall vue-cli -g或yarn global remove vue-cli卸载它...
  • (更新) 之前没留意,原来我更新的是vue-cli4了,感谢评论里大大的提醒,我以下的过程是升级到了4的前几天在跟同事合作开发的时候,被迫用vue-cli3.0构建,最近终于闲下来学习了一下vue-cli3.0的简单构建。之前我是用...
  • 1.vue2.0和3.0的初始化就存在着一定区别,比如vue3.0可以在安装脚手架同时提前安装好一些项目开发必备的插件,并且3.0提供了可视化创建脚手架,可以更加方便的对插件和依赖进行管理和配置,同时两个版本的目录结构也...
  • 今天来学习vue3.0,之前使用的是vue2.0现在用3.0的话你可以升级,也可以卸载再重装.我这里就是卸载重装啦。 第一步我们卸载全局的vue2.0 。你需要先通过npm uninstall vue-cli -g或yarn global remove vue-cli卸载...
  • 安装vue3.0(https://v3.vuejs.org/)1.首先保证vue cli 的版本,我的版本是@vue/cli 4.5.1 ,如果版本低需要升级一下。升级命令:yarn global add @vue/cli to update2.创建项目:可以采用界面方式创建(在终端输入vue ...
  • Vue2.03.0区别(总结版,不断更新)

    千次阅读 2020-05-22 16:53:39
    一 安装及版本切换 查看当前版本,如果是2开头说明当前使用的是vue-cli2,3开头的话就是vue-cli4 vue --version 如果无法识别vue命令说明没有安装vue-...从2.0升级3.0: npm uninstall -g vue-cli npm install
  • 当我们创建3.0的项目时,用的是vue create vue4-demo,这个时候下载下来的vue还是2.0的版本,然后需要用一个插件升级一下,输入vue add vue-next,接下来就会出现报错 错误原因: 系统禁止运行脚本 解决方案 ...

空空如也

空空如也

1 2 3 4 5 6
收藏数 110
精华内容 44
关键字:

vue2.0升级vue3.0

vue 订阅