1.全局安装webpack

npm install -g webpack

image

2全局安装vue-cli

npm install –g vue-cli

3.新建vue项目 myVue

vue init webpack myVue

之后一直按回车

image

输入cd myVue按回车进入项目文件夹

输入npm run dev按回车启动项目

4.适配ie9

安装 npm i babel-polyfill --save-dev

然后在main.js中的最前面引入babel-polyfill ： import'babel-polyfill'

在index.html内加入代码 :

<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">

在config中的webpack.base.conf.js中,修改编译配置

entry:{app:['babel-polyfill','./src/main.js']}

在index.html中加入代码兼容consloe.log

<script>

  if(!window.console){

      window.console={

        log:function(msg){},

        err:function(msg){}

      }

    } 

    </script>

5.引入element-ui

安装 npm i element-ui -S

npm i element-ui -S

在main.js中写引入代码

import Element from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Element);

到这一步启动时报错

image

解决办法：关闭vue-cli脚手架eslint

1.打开 build文件夹下面的webpack.base.conf.js;

2.找到下面这段代码，并将它注释掉：

const createLintingRule = () => ({
  // test: /\.(js|vue)$/,
  // loader: 'eslint-loader',
  // enforce: 'pre',
  // include: [resolve('src'), resolve('test')],
  // options: {
  //   formatter: require('eslint-friendly-formatter'),
  //   emitWarning: !config.dev.showEslintErrorsInOverlay
  // }
})

再次启动，启动成功

6elementUI实现自定义主题

安装主题工具
npm i element-theme -g
安装chalk主题
npm i element-theme-chalk -D
初始化变量文件

et -i [可以自定义变量文件，默认为element-variables.scss]

> ✔ Generator variables file

这时根目录下会产生element-variables.scss（或自定义的文件），大致如下：

$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */

$--color-success: #67c23a !default;
$--color-warning: #eb9e05 !default;
$--color-danger: #fa5555 !default;
$--color-info: #878d99 !default;

修改变量
直接编辑 element-variables.scss 文件，例如修改主题色为自己所需要的颜色（如：紫色（purple））
$--color-primary: purple;
修改完变量后，要编译主题（如果编译后，再次修改了变量，需要重新编译）

et

> ✔ build theme font
> ✔ build element theme

最后一步，将编译好的主题文件引入项目（编译的文件默认在根目录下的theme文件下，也可以通过 -o 参数指定打包目录），在入口文件main.js中引入"import '../theme/index.css'"

// element-ui
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '../theme/index.css' //引入主题文件
Vue.use(Element);

7.引入less

1.第一步安装less和less-loader，命令如下
npm install less less-loader --sava-dev
2.第二步打开build/webpack.base.conf.js，在module.exports 对象中添加依赖

module.exports = {
        module: {
            rules: [
                {
                    test: /\.less$/,
                    loader: "style-loader!css-loader!less-loader"    
                }
            ]
        }

3.第三步在代码中的style标签中加上 lang="less" 就可以使用了