admin-system 配置准备

1.创建项目，进行各种配置

（1）需要先配置@babel解析器,

cnpm install --save-dev babel-plugin-syntax-dynamic-import

（2）在 .babelrc 中写入规则

{
   
  "presets": [
    ["env", {
    "modules": false }],
    "stage-3"
  ],
  //下面plugins 配置es6兼容插件
  "plugins": ["syntax-dynamic-import"]
}

（3）配置路由

cnpm install --save-dev vue-router

（4）配置vuex:

cnpm install --save-dev vuex

2.在webpack.config.js中配置：用@代替src

resolve: {
   
    alias: {
   
      'vue$': 'vue/dist/vue.esm.js',
      '@':path.resolve(__dirname+'/src')
    },

3.使用Element-UI插件

(1)安装

cnpm install --save-dev element-ui

(2)组件规则

cnpm install --save-dev babel-plugin-component

(3)在 .babelrc 中写入规则

"plugins": [
    "syntax-dynamic-import",
    [
      "component",
      {
   
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

（4）防止安装后 字体文件解析不了 配置字体文件解析

配置到webpack.config.js中的rules中：

	{
   
        test:/\.(eto|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader:'file-loader'
    }

（5）引入main.js

import '@/element-ui/element.js'
import 'element-ui/lib/theme-chalk/index.css';  //要记得 不然会样式不全

element.js:

import Vue from 'vue'
import {
   
    Menu,
    ...
} from 'element-ui'

Vue.use(Menu);
...

4.安装less

（1）安装

cnpm install --save-dev less less-loader

（2）防止less无法解析

配置到webpack.config.js中的rules中：

{
   
	test: /\.less$/,
	loader: "style-loader!css-loader!less-loader",
},

（3）使用

<style scoped lang='less'>
</style>

此时一般会报错，less-loader版本过高引起


我们直接手动修改less-loader版本

"less": "^4.1.1",
"less-loader": "^5.0.0",

5.创建文件夹

6.样式重置

使用css样式重置中的百度的

body {
   
    font-family:arial,helvetica,sans-serif;
    font-size:14px;
    font-size-adjust:none