vue项目搭建和antd的使用

安装node环境

1、下载node 下载地址为：https://nodejs.org/en/
2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功

成功截图.png

搭建vue项目环境

1、全局安装vue-cli
npm install --global vue-cli
2、进入你的项目目录，创建一个基于 webpack 模板的新项目: vue init webpack 项目名
vue init webpack vueapp
说明：
　　　　Vue build ==> 打包方式，回车即可；
　　　　Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
　　　　Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；
　　　　Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
　　　　Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；
3、进入项目：cd vueapp，目前的脚手架默认已经安装依赖，若是没有依赖，使用命令npm install安装。安装成功后，项目文件夹中会多出一个目录：　node_modules
4、启动项目，使用命令npm run dev启动项目

安装前端ui组件库antd(本文用的全局加载，按需加载折腾不动了，关键是官网没有组件的引入)

1、使用命令安装antd的vue库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、调用

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

上个效果图

antd组件页面效果图.png

总结

1、由于是从react转过来vue的，至于原因是公司项目需要。
2、有些地方写的不好请原谅，本来想做成react那种antd的引入模式的，但是官网的代码都是vue模式的，所以直接使用全局的引入方式
3、后续会继续更新一些vue的使用说明，能力有限，望理解