vux 项目的构建

最新推荐文章于 2021-04-01 16:20:18 发布

转载最新推荐文章于 2021-04-01 16:20:18 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xcj26/p/10318757.html

文章标签：

#开发工具 #javascript #json #ViewUI

本文详细介绍了如何在项目中安装和配置VUX组件库，包括必要的依赖项如vux-loader和less-loader的安装步骤，以及如何在webpack配置文件中进行相应设置。此外，还提供了如何使用eslint-plugin-vue实现代码自动格式化的教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：vux安装

# 安装vux
cnpm install vux --save

# 安装vux-loader
cnpm install vux-loader --save-dev

# 安装less-loader（用以编译less源码，否则会出现 ' Cannot GET / '）
npm install less less-loader --save-dev

二：vux 配置

在 webpack.base.conf.js 文件中

a，修改

module.exports
改为：
var originalConfig

b，修改

extensions: ['.js', '.vue', '.json'],
改为：
extensions: ['.js', '.vue', '.json','.less'],

c，在文件末尾添加如下代码

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig 
module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

保存文件，配置完成

三：vue eslint 代码自动格式化

vue-cli 代码风格遵循了 JavaScript Standard Style 代码检查规范。

a，安装

npm i -g eslint-plugin-vue
#or
npm i -S eslint-plugin-vue

b，在项目文件 .eslintrc.js 添加如下代码

  plugins: [
    'vue'
  ],

c，在vscode开发环境中，在项目路径中，例： D:\vux\vux-bpm\.vscode\settings.json 添加如下代码

{
"eslint.autoFixOnSave": true,
"eslint.validate": [
    "javascript",{
        "language": "vue",
        "autoFix": true
    },"html",
    "vue"
],
}

配置完成后，按ctr + s，vscode会自动化帮我们格式化代码。

转载于:https://www.cnblogs.com/xcj26/p/10318757.html