vue create 和 vue init webpack 的区别

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

vue create 和 vue init webpack 的区别 以及将 vue init webpac项目改为vue create项目


提示:以下是本篇文章正文内容,下面案例可供参考

一、vue create 和 vue init webpack 的区别?

  1. vue create:vue -cli3.x 版本的初始方式 ,启动方式默认为 npm run serve
  2. vue init webpack : vue -cli2.x 版本的初始化方式,启动方式默认为 npm run dev ,webpack 为官方推荐模板

二、run serve 和 run dev 有什么区别,如何修改?

 run xxx 对应着 package 中的 script 的key,
而 run 的实际上是 key 对应的 value 值。
如果要修改的话,可以直接修改 key值

在这里插入图片描述

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"
  },

三、vue cli2升级到vue cli3

1.先升级npm的版本
npm install -g npm
2.再卸载之前的vue cli 2.9.6
npm uninstall -g @vue/cli
3.下载最新的vue cli版本
npm install -g @vue/cli
4、vue create创建一个新的项目
5、 直接复制替换src文件夹 
6、 安装项目需要的依赖 (可以将原来package.json dependencies下需要的直接复制过来,然后运行cnpm i)【注意devDependencies中有可能还有一些依赖】 
7、 安装完后运行npm run serve
8、static中文件移入public
9、创建一个vue.config.js
module.exports = {
    //打包的基本路径
    baseUrl: './',
    //打包后文件名
    outputDir: 'njDist',
    //px转rem用到
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        remUnit: 37.5
                    })
                ]
            }
        }
    },
    //cdn引入的
    configureWebpack: {
        externals: {
            'vue': 'Vue',
            'vue-router': 'VueRouter',
            'mint-ui': 'MINT',
            "BMap": "BMap",
            'vuex': 'Vuex'
        }
    },
    //启动配置
    devServer: {
        open: process.platform === 'darwin',
        port: 8882,
        https: false,
        hotOnly: false,
        proxy: null, // 设置代理
        before: app => { }
    },
};
  • 7
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小陈的程序猿之路

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值