安装node环境
1、下载node 下载地址为:https://nodejs.org/en/
2、检查是否安装成功:如果输出版本号,说明我们安装node环境成功
搭建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)
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>
上个效果图
总结
1、由于是从react转过来vue的,至于原因是公司项目需要。
2、有些地方写的不好请原谅,本来想做成react那种antd的引入模式的,但是官网的代码都是vue模式的,所以直接使用全局的引入方式
3、后续会继续更新一些vue的使用说明,能力有限,望理解