在Webstorm上使用Vue webpack Element創建項目

1.安裝node.js

1.1 到node官網下載node，如圖選擇適合自己的安裝包

1.2 下載完成後安裝，一直下一步就可以了

1.3  安裝完成後，使用win + R 打開cmd，使用 node -v 查看node版本，node是自帶npm的，使用 npm -v 可查看npm版本，如圖所示：

 

2.安裝vue cli

2.1 win10下在搜索框輸入cmd，右鍵以管理員運行，如圖所示：

2.2 輸入 npm install -g vue-cli，回車，安裝vue-cli，安裝完成後重新打開cmd，輸入vue -V可查看vue-cli版本（vue3.0以上的安裝有點不一樣，vue3.0以上使用 npm install @vue/cli -g 安裝）

2.3 使用 npm uninstall vue-cli -g 可以卸載vue-cli

 

3.初始化webpack項目

3.1 使用 vue init webpack  test創建一個名爲test的webpack項目，可根據提示輸入自己的項目信息

3.2 輸入相關信息後，就會開始構建項目，項目構建完成後，可進到項目根目錄下，使用 npm run dev 啓動項目

3.3 在瀏覽器輸入 http://localhost:8082 訪問項目，如圖所示：

3.4 至此，一個基於webpack的vue項目搭建完成

4.安裝element-ui，啓動項目

element-ui是一個好用的vue頁面框架，使用它可以快速的構建好看的前端頁面。

4.1 使用win + R打開cmd，cd到項目根目錄下

 

4.2 給當前項目安裝element-ui模塊，安裝命令是：npm install element-ui --save，安裝完成後如下圖：

4.3 在main.js中引入element-ui，並使用此插件，然後就可以在頁面中使用element-ui的插件了

4.4 在components文件夾下的HelloWorld.vue中加入如下代碼:

    <el-row>
      <el-button>默認按鈕</el-button>
      <el-button type="primary">主要按鈕</el-button>
      <el-button type="success">成功按鈕</el-button>
      <el-button type="info">信息按鈕</el-button>
      <el-button type="warning">警告按鈕</el-button>
      <el-button type="danger">危險按鈕</el-button>
    </el-row>

    <el-row>
      <el-button plain>樸素按鈕</el-button>
      <el-button type="primary" plain>主要按鈕</el-button>
      <el-button type="success" plain>成功按鈕</el-button>
      <el-button type="info" plain>信息按鈕</el-button>
      <el-button type="warning" plain>警告按鈕</el-button>
      <el-button type="danger" plain>危險按鈕</el-button>
    </el-row>

    <el-row>
      <el-button round>圓角按鈕</el-button>
      <el-button type="primary" round>主要按鈕</el-button>
      <el-button type="success" round>成功按鈕</el-button>
      <el-button type="info" round>信息按鈕</el-button>
      <el-button type="warning" round>警告按鈕</el-button>
      <el-button type="danger" round>危險按鈕</el-button>
    </el-row>

HelloWorld完整代碼:

<template>
  <div class="hello">

    <el-row>
      <el-button>默認按鈕</el-button>
      <el-button type="primary">主要按鈕</el-button>
      <el-button type="success">成功按鈕</el-button>
      <el-button type="info">信息按鈕</el-button>
      <el-button type="warning">警告按鈕</el-button>
      <el-button type="danger">危險按鈕</el-button>
    </el-row>

    <el-row>
      <el-button plain>樸素按鈕</el-button>
      <el-button type="primary" plain>主要按鈕</el-button>
      <el-button type="success" plain>成功按鈕</el-button>
      <el-button type="info" plain>信息按鈕</el-button>
      <el-button type="warning" plain>警告按鈕</el-button>
      <el-button type="danger" plain>危險按鈕</el-button>
    </el-row>

    <el-row>
      <el-button round>圓角按鈕</el-button>
      <el-button type="primary" round>主要按鈕</el-button>
      <el-button type="success" round>成功按鈕</el-button>
      <el-button type="info" round>信息按鈕</el-button>
      <el-button type="warning" round>警告按鈕</el-button>
      <el-button type="danger" round>危險按鈕</el-button>
    </el-row>

    <el-row>
      <el-button icon="el-icon-search" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
      <el-button type="success" icon="el-icon-check" circle></el-button>
      <el-button type="info" icon="el-icon-message" circle></el-button>
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</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>

4.5 在項目根目錄下打開cmd，輸入 npm run dev 啓動項目

4.6 在瀏覽器輸入http://localhost:8081訪問

4.7 至此，基於vue+webpack+element-ui的項目建完成