增加less

build/webpack.base.conf.js

@@ -60,7 +60,7 @@ module.exports = {
     new webpack.optimize.SplitChunksPlugin() // 提取公共代码
   ],
   resolve: {
-    extensions: ['.js', '.scss', '.css', '.vue'],// 省去后缀
+    extensions: ['.js', '.css', '.vue'],// 省去后缀
     alias: {
         'vue$': 'vue/dist/vue.esm.js', //配置别名 确保webpack可以找到.vue文件
         "@": path.resolve(__dirname, '../src'),

build/webpack.dev.conf.js

@@ -5,20 +5,25 @@ const baseConfig = require('./webpack.base.conf');
 const path = require('path');
 
 module.exports = merge(baseConfig, {
-  mode: 'development',
   devtool: 'inline-source-map',
   module: {
     rules: [
       {
-        test: /\.css$/,
+        test: /\.(sa|sc|c)ss$/,
         use: [
-          'vue-style-loader',
+          {
+            loader: 'vue-style-loader',
+            options: {
+              publicPath: '../'
+            }
+          },
           'css-loader',
-          'postcss-loader'
-        ]
+          'postcss-loader',
+          'sass-loader',
+        ],
       },
       {
-        test: /\.scss$/,
+        test: /\.less$/,
         use: [
           {
             loader: 'vue-style-loader',
@@ -28,7 +33,7 @@ module.exports = merge(baseConfig, {
           },
           'css-loader',
           'postcss-loader',
-          'sass-loader',
+          'less-loader',
         ],
       },
     ]

build/webpack.prod.conf.js

@@ -11,20 +11,25 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 
 module.exports = merge(baseConfig, {
-  mode: 'production',
   devtool: 'source-map',
   module: {
     rules: [
       {
-        test: /\.css$/,
+        test: /\.(sa|sc|c)ss$/,
         use: [
-          MiniCssExtractPlugin.loader,
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: '../'
+            }
+          },
           'css-loader',
-          'postcss-loader'
-        ]
+          'postcss-loader',
+          'sass-loader',
+        ],
       },
       {
-        test: /\.scss$/,
+        test: /\.less$/,
         use: [
           {
             loader: MiniCssExtractPlugin.loader,
@@ -34,7 +39,7 @@ module.exports = merge(baseConfig, {
           },
           'css-loader',
           'postcss-loader',
-          'sass-loader',
+          'less-loader',
         ],
       }
     ]

package-lock.json

@@ -587,6 +587,13 @@
       "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
       "dev": true
     },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
+      "dev": true,
+      "optional": true
+    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -2233,6 +2240,12 @@
         "wrap-ansi": "^2.0.0"
       }
     },
+    "clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+      "dev": true
+    },
     "clone-deep": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-2.0.2.tgz",
@@ -4900,6 +4913,13 @@
       "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=",
       "dev": true
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
+      "dev": true,
+      "optional": true
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -5466,6 +5486,51 @@
         "invert-kv": "^2.0.0"
       }
     },
+    "less": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/less/-/less-3.9.0.tgz",
+      "integrity": "sha512-31CmtPEZraNUtuUREYjSqRkeETFdyEHSEPAGq4erDlUXtda7pzNmctdljdIagSb589d/qXGWiiP31R5JVf+v0w==",
+      "dev": true,
+      "requires": {
+        "clone": "^2.1.2",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "mime": "^1.4.1",
+        "mkdirp": "^0.5.0",
+        "promise": "^7.1.1",
+        "request": "^2.83.0",
+        "source-map": "~0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "less-loader": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-4.1.0.tgz",
+      "integrity": "sha512-KNTsgCE9tMOM70+ddxp9yyt9iHqgmSs0yTZc5XH5Wo+g80RWRIYNqE58QJKm/yMud5wZEvz50ugRDuzVIkyahg==",
+      "dev": true,
+      "requires": {
+        "clone": "^2.1.1",
+        "loader-utils": "^1.1.0",
+        "pify": "^3.0.0"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+          "dev": true
+        }
+      }
+    },
     "load-json-file": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
@@ -7271,6 +7336,16 @@
       "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
       "dev": true
     },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",

package.json

@@ -25,6 +25,8 @@
     "eslint-plugin-vue": "^5.2.2",
     "file-loader": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
+    "less": "^3.9.0",
+    "less-loader": "^4.1.0",
     "mini-css-extract-plugin": "^0.5.0",
     "node-sass": "^4.11.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",

src/pages/layout/Layout.vue

@@ -21,7 +21,7 @@ export default {
   },
 }
 </script>
-<style lang="scss">
+<style lang="less">
   .container {
     width: 100%;
     height: 100%;

src/pages/layout/leftnav/LeftNav.vue

@@ -40,7 +40,7 @@
     </el-menu>
   </div>
 </template>
-<style lang="scss">
+<style lang="less">
   .left-nav {
     width: 200px;
     height: 100%;

src/pages/layout/tabs/Tabs.vue

@@ -91,7 +91,7 @@
     }
   }
 </script>
-<style lang="scss">
+<style lang="less">
   .tabs {
     white-space: nowrap;
     overflow: hidden;

src/pages/layout/toptitle/TopTitle.vue

@@ -15,7 +15,7 @@
     </el-dropdown>
   </div>
 </template>
-<style lang="scss">
+<style lang="less">
   .top-title {
     display: flex;
     align-items: center;

src/pages/login/Login.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login-container">
     <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" autocomplete="off" class="login-form">
-      <h3 class="title">登录</h3>
+      <h3 class="title">登录1</h3>
       <el-form-item prop="userName" class="el-form-item">
         <el-input v-model="loginForm.userName" name="userName" type="text" autocomplete="off" placeholder="账号"/>
       </el-form-item>
@@ -63,7 +63,7 @@
             // const userName = this.loginForm.userName;
             // const password = this.loginForm.password;
             this.$store.dispatch('Login', this.loginForm).then(() => {
-              alert('登录成功');
+              alert('登录成功1');
               this.$router.push({ path: '/nav/nav1' })
             }).catch(() => {
               alert('登录失败');
@@ -82,7 +82,7 @@
   }
 </script>
 
-<style lang="scss">
+<style lang="less">
   .login-container {
     width: 100%;
     height: 100%;

src/pages/nav1/Nav1.vue

@@ -52,7 +52,6 @@
   export default {
     data() {
       return {
-        tableData: [],
         dialogVisible: false,
         form: {
           name: '',
@@ -64,6 +63,11 @@
         type: ''
       }
     },
+    computed: {
+      ...mapGetters({
+        tableData: 'data'
+      })
+    },
     methods: {
       handleEdit(index, row) {
         this.dialogVisible = true;
@@ -82,18 +86,10 @@
             console.log(this.form)
             const form = this.form;
             if(this.type == 'add') {
-              addCompanyList(form).then(res => {
-                companyList().then(res => {
-                  if(res.code == 200) {
-                    this.tableData = res.data;
-                  }
-                })
-              })
+              this.$store.dispatch('addCompanyList', form)
             }else {
               const index = this.setIndex;
-              setCompanyList(form).then(res => {
-                this.tableData[index].name = form.name;
-              });
+              this.$store.dispatch('setCompanyList', {form, index})
             }
             this.dialogVisible = false;
           } else {
@@ -109,11 +105,7 @@
       }
     },
     created () {
-      companyList().then(res => {
-        if(res.code == 200) {
-          this.tableData = res.data;
-        }
-      })
+      this.$store.dispatch('getCompanyList')
     }
   }
 </script>

src/store/modules/navList.js

@@ -1,4 +1,4 @@
-import { companyList, setCompanyList } from '../../api/nav1.js';
+import { companyList, setCompanyList, addCompanyList } from '../../api/nav1.js';
 const navList = {
   state: {
     data: [],
@@ -30,7 +30,18 @@ const navList = {
            if(res.code == 200) {
              const data = res.data;
              commit('SET_LIST', { data, index });
-            resolve(res.data);
+             resolve(res.data);
+          }
+        }).catch(error => {
+          reject(error);
+        })
+      })
+    },
+    addCompanyList({dispatch, commit}, form) {
+      return new Promise((resolve, reject) => {
+        addCompanyList(form).then(res => {
+           if(res.code == 200) {
+            dispatch('getCompanyList');
           }
         }).catch(error => {
           reject(error);