vue2.0 + element-ui 實戰(zhàn)項目- 搭建環(huán)境(一）

自從用餓了么框架重構項目以來恩沽，遇到很多問題，我都有一一記錄下來崎弃，現(xiàn)在特喜歡這個框架遏弱，說實話泪姨，如果你是用了vue這個技術棧的話，一定要用餓了么的pc端框架哦，遇到問題的時候在網上百度一下疆柔，就能找到解決方案，還有很多社區(qū)可以討論鞋屈，社區(qū)文檔都比較成熟厂庇，很容易上手~~

Element UI手冊：https://cloud.tencent.com/developer/doc/1270
github地址：https://github.com/ElemeFE/element

vue2.0官方網站：http://caibaojian.com/vue/guide/installation.html
element-ui官方網站：https://element.eleme.cn/#/zh-CN

vue項目中引入餓了么elementUI組件
http://www.reibang.com/p/094eccb84267

1：安裝node

端開發(fā)框架和環(huán)境都是需要 Node.js ，先安裝node.js開發(fā)環(huán)境，vue的運行是要依賴于node的npm的管理工具來實現(xiàn)，下載https://nodejs.org/en/，安裝完成之后介衔，打開cmd開始輸入命令。（我用的是win10系統(tǒng)急迂，所以需要管理員權限猴娩，右鍵點擊以管理員身份運行cmd）勺阐，不然會出現(xiàn)很多報錯。

2：查看node的版本號

下載好node之后蟆豫，以管理員身份打開cmd管理工具，懒闷，輸入 node -v 帮辟，回車芍锚，查看node版本號，出現(xiàn)版本號則說明安裝成功润樱。

輸入命令： node -v

image

3：安裝淘寶npm鏡像

由于npm是國外的渣触，使用起來比較慢，我們這里使用淘寶的cnpm鏡像來安裝vue.
淘寶的cnpm命令管理工具可以代替默認的npm管理工具壹若。

輸入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

image

4：安裝全局vue-cli腳手架

淘寶鏡像安裝成功之后嗅钻，我們就可以全局vue-cli腳手架，輸入命令：cnpm install --global vue-cli 回車店展；驗證是否安裝成功养篓，在命令輸入vue，出來vue的信息赂蕴，及說明安裝成功柳弄；

輸入命令：cnpm install --global vue-cli

image

5：開始進入主題，初始化一個vue項目

我這里是在d盤里面新建一個項目概说，先用d:的命令碧注，回車鍵進入d盤；回車鍵默認創(chuàng)建項目信息糖赔。

vue init webpack itemname

image

出現(xiàn)這樣的提示萍丐，初始化成功

image

根據(jù)提示輸入運行項目（安裝依賴很重要哦，千萬不要忘記了放典，忘記安裝后面出的問題就比較多哦~）

# 安裝依賴逝变，走你
$ cd itemname
$ npm install
$ npm run dev

在瀏覽器就可以看到效果了。

運行初始化demo奋构，輸入命令npm run dev壳影；運行一下初始后的demo，彈出訪問地址弥臼，如果沒有問題則進行安裝elementUI宴咧；準備好好之后，開始引入餓了么elementUI組件径缅。

6：安裝 elementUI

npm i element-ui -S

快捷鍵ctrl+c,終止批處理操作嗎(Y/N)悠汽，在輸入命令npm i element-ui -S

注意：安裝過程中出現(xiàn)這樣的bug的時候箱吕，需要解決

image

解決辦法：嘗試刪除項目中的 package-lock.json 文件和 node_modules 文件夾，然后再嘗試 npm install.

成功安裝組件顯示如下

image

7：在components文件夾下面創(chuàng)建test.vue文件柿冲，復制一段elementUI官方文檔的代碼茬高，進行測試

<template>
    <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item index="1">處理中心</el-menu-item>
        <el-submenu index="2">
            <template slot="title">我的工作臺</template>
            <el-menu-item index="2-1">選項1</el-menu-item>
            <el-menu-item index="2-2">選項2</el-menu-item>
            <el-menu-item index="2-3">選項3</el-menu-item>
        </el-submenu>
        <el-menu-item index="3">
            <a  target="_blank">訂單管理</a>
        </el-menu-item>
    </el-menu>
</template>

<script>
    export default {
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1'
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

8：在App.vue中引入test.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <Test></Test>
  </div>
</template>

<script>
    import Test from './components/test.vue'

export default {
    components:{
  Test,
 },
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

9：打開main.js,加入element-ui的js和css

import ElementUI from 'element-ui' //element-ui的全部組件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI

10：再次運行，組件中的效果如下：

輸入命令：

npm run dev

image

引入成功了假抄，開始開發(fā)咯~