创建vue-cli2项目与vue-cli3项目的差别

从创建命令行来看

• 创建vue-cli2的项目时，使用的命令行是：vue init webpack project-name
• 而创建vue-cli3的项目时，使用的命令行是：vue create project-name

另一种创建方式是使用vue-ui视图工具来进行的，具体的使用方式，这里就不进行具体描述了，网上有很多的教程。

从目录结构上看

• vue-cli2创建的项目目录文件有清晰的文件结构，文件内容可以按照项目需求自行配置

• 而vue-cli3项目文件目录结构就很简单，因为在项目创建的时候，就帮我们自动配置了80%左右的基本配置，其余的配置需要我们自行创建 vue.config.js 文件进行配置。

从运行项目命令来看

• vue-cli2项目使用的运行命令行是: npm run serve
• vue-cli3项目使用的运行命令行是: npm run dev

从修改配置文件来看

以安装使用vant，并采用按需加载，同时使用less语法为例。

• vue2和vue3都需要先执行以下两步：
  1.先安装vant： npm install vant --save
  2.在安装按需加载插件babel-plugin-import： npm install babel-plugin-import -D
  3.再安装less和less-loader插件：npm install less less-loader --save

以下是vue2和vue3的差别：

1. vue-cli2

a. 按需引入vant需要在 `.babelrc` 文件中添加按需引入插件配置：
```
"plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    ["import", {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
    }]
]
```
再在main.js或者具体页面中按需加载你所需要的插件：
```
import Vue from 'vue'
// 先按需引入vant组件
import{
    Button,
    List
}

// 再使用组件
Vue.use(Button).use(List)
```
页面中直接调用
```
<van-button></van-button>
```

b. 使用less需要在build文件夹下的 `webpack.base.conf.js` 中的model.rules中添加如下配置：
```
module: {
    rules: [
        // ...其他文件配置
        {  
            test: /\\.less$/,  
            loader: "style-loader!css-loader!less-loader",  
        }
    ]
}
```
在样式表中就可直接使用less语法：
```
<style lang='less' scoped>
    .container{
        width: 100px;
        height: 100px;
        
        .inner{
            width: 50px;
            height: 50px;
        }
    }
</style>
```

2. vue-cli3

a. 实现按需加载，需要在 `.babelrc` 文件中添加
```
"plugins": [
        ["import", {
            "libraryName": "vant",
            "libraryDirectory": "es",
            "style": true
        }]
    ]
```
然后在使用的页面中按需加载引入需要的组件
```
<script>  
import {Button, Field, CellGroup, NavBar, Toast} from 'vant'  

export default {  
    name: 'HelloWorld',  
    components: {  
        \[Button.name]: Button,  
        \[Field.name]: Field
    },  
    data() {  
        return {}  
    },  
</script>
```
页面中引用：
```
<van-button></van-button>
```
 b. 使用less，一定需要安装 `style-resource-loader` 插件
 安装命令：`npm install stylus-resources-loader --save-dev` 或者 `vue add style-resources-loader`
 
 安装完成后，在项目根目录下创建`vue.config.js` 文件，添加less相关配置，在 `pluginOptions` 中添加下内容：
```
const path = require('path')  
module.exports = {  
    publicPath: '/',  // publicPath 属性到 vue-cli 3.2.0 之后才支持，所以将 publicPaht 改成 baseUrl 即可，或者升级你的 vue-cli 。
    outputDir: 'dist', // 打包的目录  
    lintOnSave: true, // 在保存时校验格式  
    productionSourceMap: false, // 生产环境是否生成 SourceMap  
    devServer: {  
        open: true, // 启动服务后是否打开浏览器  
        host: '0.0.0.0',  
        port: 8080, // 服务端口  
        https: false,  
        hotOnly: false,  
        proxy: null, // 设置代理  
        before: app => {}  
    },  

    // 第三方插件配置  
    pluginOptions: {  
        'style-resources-loader': {  
            preProcessor: 'less',  
            patterns: [  
                // 导入全局公共样式  
                path.resolve(__dirname, 'src/assets/css/theme.less')  
            ]  
        }  
    }  
};
```
接着就可以在样式表中使用less语法：
```
<style lang='less' scoped>
    .container{
        width: 100px;
        height: 100px;
        
        .inner{
            width: 50px;
            height: 50px;
        }
    }
</style>
```

以上，就是目前我所知道的vue-cli2与vue-cli3在项目创建到使用时的一些差别，比较浅显，后续有发现，再补充