已安裝node,第一次安裝vue-cli

1.全局安裝webpack

npm install -g webpack

image

2全局安裝vue-cli

npm install –g vue-cli

3.新建vue項(xiàng)目 myVue

vue init webpack myVue

之后一直按回車

image

image

輸入cd myVue按回車進(jìn)入項(xiàng)目文件夾

輸入npm run dev按回車啟動(dòng)項(xiàng)目

4.適配ie9

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

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

在index.html內(nèi)加入代碼 :

<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);

到這一步啟動(dòng)時(shí)報(bào)錯(cuò)

image

解決辦法：關(guān)閉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
  // }
})

再次啟動(dòng)，啟動(dòng)成功

6elementUI實(shí)現(xiàn)自定義主題

安裝主題工具
npm i element-theme -g
安裝chalk主題
npm i element-theme-chalk -D
初始化變量文件

et -i [可以自定義變量文件，默認(rèn)為element-variables.scss]

> ? Generator variables file

這時(shí)根目錄下會(huì)產(chǎn)生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

最后一步，將編譯好的主題文件引入項(xiàng)目（編譯的文件默認(rèn)在根目錄下的theme文件下，也可以通過 -o 參數(shù)指定打包目錄），在入口文件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 對(duì)象中添加依賴

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

3.第三步 在代碼中的style標(biāo)簽中加上 lang="less" 就可以使用了

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