Vue笔记（四）

模块化

略

webpack配置

webpack
npm install webpack@3.6.0

css-loader
npm install css-loader@2.0.2 --save-dev

style-loader
npm install style-loader@0.23.1 --save-dev

less-loader
npm install --save-dev less-loader@4.1.0 less@3.9.0

url-loader
npm install --save-dev url-loader@1.1.2

es6转换成es5
npm install --save-dev babel-loader@7.1.5 babel-core@6.26.3 babel-preset-es2015@6.24.1

Vue
npm install vue@2.5.21 --save

老师的webpack配置相关版本：
vue-loader和vue-template-compiler
npm install vue-loader@15.4.2 vue-template-compiler@2.5.21 --save-dev
在webpack.config.js里添加插件–>vue官网–（导航栏）生态系统–工具–vue loader–（导航栏）–如何从V14迁移–Vue Loader v15
现在需要配合一个 webpack 插件才能正确使用：
按照图片提示分别添加 const VueLoaderPlugin = require(‘vue-loader/lib/plugin’) 和 plugins: 【new VueLoaderPlugin()】，然后在package.json里面找到"vue-loader": “^15.4.2”,并更改为"vue-loader": “^15.0.0”,
然后在控制终端npm install即可完成，这里卡了我好久，分享给大家

(我是用这个，plugins放在resolve之前）

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}

打包index.html文件到dist文件夹
npm install html-webpack-plugin@3.2.0 --save–dev

js压缩的Plugin
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

搭建本地服务器
npm install --save-dev webpack-dev-server@2.9.3

配置文件合并
npm install webpack-merge@4.1.5

Vue Cli

安装：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建一个项目：

vue create my-project
# OR
vue ui