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

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 => { }
    },
};
Logo

前往低代码交流专区

更多推荐