Vue单文件组件开发：Vue Loader 及其 webpack 配置

安装snapd

sudo apt install snapd
sudo snap install core # 安装snap核心库
sudo snap refresh core # 更新snap核心库？

通过snap安装Node.js

sudo snap info node # 查询channels
sudo snap install node --classic --channel=13 #以经典模式安装指定版本的Node.js

现在npm和node命令可用

npm -v
6.13.1
node -v
v13.3.0

安装webpack

...

手动配置webpack 官方文档

• 安装依赖

npm i -D css-loader vue-loader vue-template-compiler

配置webpack.config.js:

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

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

安装Vue-CLI

sudo npm install -g core-js --scripts-prepend-node-path
sudo npm install -g @vue/cli --scripts-prepend-node-path

现在vue命令可用

vue -V
@vue/cli 4.1.1

END