使用vue-cli搭建element-ui項目

最近在使用element-ui搭建項目時發現若只純用webpack來運行element-ui，要配置各類文件，對於新手來講實在太不友好了，

就想到用vue-cli來搭建整個vue項目

1.安裝node.js

2.安裝webpack

全局安裝 webpack命令

 npm install webpack -g

3.安裝淘寶鏡像【網速快的童鞋能夠省略此步】

1 npm install -g cnpm --registry=https://registry.npm.taobao.org

4.vue腳手架全局安裝 -- 用於生成vue模板

npm install -g vue-cli

把它理解成讓你不須要爲編譯或其餘瑣碎的事情而浪費時間，幫助你快速開始一個vue項目，其實其本質就是給你一套文件結構，包含基礎的依賴庫

5.使用腳手架構建vue項目 -- 一路回車就好了

vue init webpack

6.element-ui安裝

npm i element-ui

注意：到此部element-ui只是安裝到項目目錄下，但還須要在項目文件中配置才能使用，不然直接寫入element-ui的組件代碼會報錯！！【此處新手極易踩巨坑！】

（1），在package.json文件中找到 devDependencies，在括號內追加上"element-ui": "^2.4.6"，若是不知道element的版本，能夠在node_modules/element-ui/package.json中查找版本號，

（2），在src/main.js中添加引用element-ui聲明

 

到此，element-ui安裝完畢。

7.依賴安裝

npm install

8.運行項目

npm run dev

 

 

運行成功！

 

9，添加一個實例

（1），在src/components目錄下新建一個Index.vue文件

<template>
  <div class="hello" id="">
    <h1>{{ msg }}</h1>
    <template>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in 6" :key="item">
          <h3>{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </template>
  </div>
</template>

<script>
  export default { name: 'index', data () { return { msg: '這是新添加的走馬燈文件', } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } .hello{ width: 1200px; margin: auto; } .el-carousel__item h3 { color: #475669; font-size: 14px; opacity: 0.75; line-height: 200px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; } </style>

（2），修改HelloWorld.vue文件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-link to="index"><h1>{{ btnLin }}</h1></router-link> <!-- router是vue官方路由to="index"是在router/index.js路由文件中跳轉到Index.vue文件 -->

  </div>
</template>

<script>
export default { name: 'HelloWorld', data () { return { msg: '測試文件安裝是否成功111', btnLin: '點擊我跳轉' } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>

（3），修改路由文件router/index.js

 1 import Vue from 'vue'
 2 import Router from 'vue-router' 3 import HelloWorld from '@/components/HelloWorld' 4 import Index from '@/components/Index' 5 // import home from '@/components/home/home' 6 7 8 Vue.use(Router) 9 10 export default new Router({ 11  routes: [ 12  { 13  path: '/', 14  name: 'HelloWorld', 15  component: HelloWorld 16  }, 17  { 18  path: '/index', 19  name: 'Index', 20  component: Index 21  } 22  ] 23  24 25 })

（4），ctrl+s保存文件後，頁面自動刷新以下

 

大功告成！！！

 

 

├─build # 編譯後生成的全部代碼、資源（圖片、字體等，雖然只是簡單的從源目錄遷移過來）
├─node_modules # 利用npm管理的全部包及其依賴
├─vendor # 全部不能用npm管理的第三方庫
├─.babelrc # babel的配置文件
├─.eslintrc # ESLint的配置文件
├─index.html # 僅做爲重定向使用
├─package.json # npm的配置文件
├─webpack-config # 存放分拆後的webpack配置文件
│   ├─base # 主要是存放一些變量
│   ├─inherit # 存放生產環境和開發環境相同的部分，以供繼承
│   └─vendor # 存放webpack兼容第三方庫所需的配置文件
├─webpack.config.js # 生產環境的webpack配置文件（無實質內容，僅爲組織整理）
├─webpack.dev.config.js # 開發環境的webpack配置文件（無實質內容，僅爲組織整理）
├─src # 當前項目的源碼
    ├─pages # 各個頁面獨有的部分，如入口文件、只有該頁面使用到的css、模板文件等
    │  ├─alert # 業務模塊
    │  │  └─index # 具體頁面
    │  ├─index # 業務模塊
    │  │  ├─index # 具體頁面
    │  │  └─login # 具體頁面
    │  │      └─templates # 若是一個頁面的HTML比較複雜，能夠分紅多塊再拼在一塊兒
    │  └─user # 業務模塊
    │      ├─edit-password # 具體頁面
    │      └─modify-info # 具體頁面
    └─public-resource # 各個頁面使用到的公共資源
        ├─components # 組件，能夠是純HTML，也能夠包含js/css/image等，看本身須要
        │  ├─footer # 頁尾
        │  ├─header # 頁頭
        │  ├─side-menu # 側邊欄
        │  └─top-nav # 頂部菜單
        ├─config # 各類配置文件
        ├─iconfont # iconfont的字體文件
        ├─imgs # 公用的圖片資源
        ├─layout # UI佈局，組織各個組件拼起來，因應須要能夠有不一樣的佈局套路
        │  ├─layout # 具體的佈局套路
        │  └─layout-without-nav # 具體的佈局套路
        ├─less # less文件，用sass的也能夠，又或者是純css
        │  ├─base-dir
        │  ├─components-dir # 若是組件自己不須要js的，那麼要加載組件的css比較困難，我建議能夠直接用less來加載
        │  └─base.less # 組織全部的less文件
        ├─libs # 與業務邏輯無關的庫均可以放到這裏
        └─logic # 業務邏輯