webpack结合vue搭建开发环境

基于vue的脚手架确实为我们简化了开发流程，统一了项目目录规范，现在我们自己基于前面的webpack配置，搭建一个基于vue的开发环境，这是一个渐进的过程

那与vue集成需要哪些关键要素呢？

1、安装babel环境（因为vue基于ES6+来开发的）
2、集成.vue文件的(由vue作者开发的单文件组件vue-loader)
3、集成less
4、集成vue-router
5、集成vuex
6、...... 

下面我们分别安装上面的环境：

1、 安装babel环境

babel环境需要三个类包：babel-loader @babel/core @babel/preset-env

npm install babel-loader @babel/core @babel/preset-env --save-dev

并且在项目根目录下创建一个.babelrc配置文件，写入以下内容：

{
    "presets":["@babel/preset-env"]
}

2 集成.vue文件（单文件组件）

要集成.vue格式的文件需要安装两个类包：vue-loader,vue-template-compiler

npm install vue-loader vue-template-compiler --save-dev

安装完在webpack.config.js中添加配置.vue的rules规则，添加的配置如下：

const config = {
    ...,
    module: {
        rules: [
            ...,
            { test: /.vue$/, use: ['vue-loader'] },
            ...
      ] 
    },
    ...
}

此处有演示...

其中.vue格式中的style样式部分，得需要安装vue-style-loader来解析

npm install vue-style-loader --save-dev

安装完同样在webpack.config.js添加一条基于.vue文件中style的样式配置，配置如下:

const config = {
    ...,
    module: {
        rules: [
            ...,
            { test: /.css$/, use: ['vue-style-loader', 'css-loader'] },
            { test: /.vue$/, use: ['vue-loader'] },
            ...
      ] 
    },
    ...
}

此处有演示...

集成less

集成less需要安装两个类包：less,less-loader，安装如下：

npm install less less-loader --save-dev

安装完同样在webpack.config.js添加一条基于less的配置规则，配置如下:

const config = {
    ...,
    module: {
        rules: [
            ...,
            { test: /.css$/, use: ['vue-style-loader', 'css-loader'] },
            { test: /.less$/, use: ['vue-style-loader', 'css-loader','less-loader'] },
            { test: /.vue$/, use: ['vue-loader'] },
            ...
      ] 
    },
    ...
}

此处有演示...

集成vue-router

集成完vue后，集成vue-router和vuex都so easy了，因为这些都是基于vue的全家桶的安装了，请往下看...

先安装vue-rotuer

npm install vue-router --save

安装完后，测试vue-router是不可用

集成vuex

集成方法和vue-router类似，这里就不展开了