安裝node環(huán)境

1年堆、下載node 下載地址為：https://nodejs.org/en/
2丹墨、檢查是否安裝成功：如果輸出版本號(hào)恼除，說(shuō)明我們安裝node環(huán)境成功

成功截圖.png

搭建vue項(xiàng)目環(huán)境

1疾牲、全局安裝vue-cli
npm install --global vue-cli
2植捎、進(jìn)入你的項(xiàng)目目錄，創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目: vue init webpack 項(xiàng)目名
vue init webpack vueapp
說(shuō)明：
　　　　Vue build ==> 打包方式阳柔，回車即可焰枢；
　　　　Install vue-router ==> 是否要安裝 vue-router，項(xiàng)目中肯定要使用到 所以Y 回車舌剂；
　　　　Use ESLint to lint your code ==> 是否需要 js 語(yǔ)法檢測(cè) 目前我們不需要 所以 n 回車济锄；
　　　　Set up unit tests ==> 是否安裝 單元測(cè)試工具 目前我們不需要 所以 n 回車；
　　　　Setup e2e tests with Nightwatch ==> 是否需要 端到端測(cè)試工具 目前我們不需要 所以 n 回車霍转；
3荐绝、進(jìn)入項(xiàng)目：cd vueapp，目前的腳手架默認(rèn)已經(jīng)安裝依賴避消，若是沒有依賴低滩，使用命令npm install安裝。安裝成功后沾谓，項(xiàng)目文件夾中會(huì)多出一個(gè)目錄：　node_modules
4、啟動(dòng)項(xiàng)目戳鹅，使用命令npm run dev啟動(dòng)項(xiàng)目

安裝前端ui組件庫(kù)antd(本文用的全局加載均驶，按需加載折騰不動(dòng)了，關(guān)鍵是官網(wǎng)沒有組件的引入)

1枫虏、使用命令安裝antd的vue庫(kù)npm install ant-design-vue --save-dev
2妇穴、在main文件中添加antd的全局引入

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

Vue.use(Antd)

示意圖.png

3、調(diào)用

<template>
  <a-layout id="components-layout-demo-top" class="layout">
    <a-layout-header>
      <div class="logo" />
      <a-menu
        theme="dark"
        mode="horizontal"
        :defaultSelectedKeys="['2']"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">nav 1</a-menu-item>
        <a-menu-item key="2">nav 2</a-menu-item>
        <a-menu-item key="3">nav 3</a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout-content style="padding: 0 50px">
      <a-breadcrumb style="margin: 16px 0">
        <a-breadcrumb-item>Home</a-breadcrumb-item>
        <a-breadcrumb-item>List</a-breadcrumb-item>
        <a-breadcrumb-item>App</a-breadcrumb-item>
      </a-breadcrumb>
      <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">Content</div>
    </a-layout-content>
    <a-layout-footer style="text-align: center">Ant Design ?2018 Created by Ant UED</a-layout-footer>
  </a-layout>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  methods: {
    onclick() {
      console.log(123);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

上個(gè)效果圖

antd組件頁(yè)面效果圖.png

總結(jié)

1隶债、由于是從react轉(zhuǎn)過來(lái)vue的腾它，至于原因是公司項(xiàng)目需要。
2死讹、有些地方寫的不好請(qǐng)?jiān)徛鞯危緛?lái)想做成react那種antd的引入模式的，但是官網(wǎng)的代碼都是vue模式的，所以直接使用全局的引入方式
3妓忍、后續(xù)會(huì)繼續(xù)更新一些vue的使用說(shuō)明虏两，能力有限，望理解