版权声明：本文为博主原创文章，未经博主允许不得转载。博主地址：http://blog.csdn.net/freewebsys https://blog.csdn.net/freewebsys/article/details/80922360
本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/80922360
nodejs分类：
https://blog.csdn.net/freewebsys/article/category/6904116
博主地址是：http://blog.csdn.net/freewebsys
1，下载nodejs 程序
https://nodejs.org/en/download/
安装到 D:\Program Files\nodejs 下面有个 node.exe
默认安装就行。
然后使用 config ls 查看环境变量配置
npm config ls重新设置npm下载文件位置，要是不修改的话c盘会堆满文件的。
npm config set prefix "D:\Users\nodejs\npm"
npm config set cache "D:\Users\nodejs\npm\cache"最后再修改环境变量。
把那个啥 app\npm 修改成：
D:\Users\nodejs\npm2，安装搭建vue element 环境
使用cnpm 替代npm 加速下载：
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g vue-cli创建项目：
mkdir demo01
vue init webpack除了这个两个 test 其他都按回车就行。还有那个eslint 也不要。搞的很复杂是的。
PS D:\nodejs-workspace\demo01> vue init webpack
? Generate project in current directory? Yes
? Project name demo01
? Project description A Vue.js project
? Author demo01
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "demo01".
# Installing project dependencies ...
# ========================然后执行：
cnpm install
cnpm run dev 启动之后就可以看到 http://localhost:8081/#/
扫描二维码关注公众号，回复：
2922399 查看本文章
3，增加 element ui
使用 install -S 是保存到当前工程目录上。
cnpm install element-ui -S
cnpm install可以看到多了一个 package。
启动：
cnpm run dev找下官方网站的例子：
http://element-cn.eleme.io/2.3/#/zh-CN/component/layout
直接从 layout开始看就行。
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})页面：App.vue
<template>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<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-date-picker
v-model="value1"
type="date"
placeholder="选择日期">
</el-date-picker>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</template>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
name: 'app',
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
4，总结
elemnt-ui 和vue 都是好的技术，可以快速的搭建漂亮的项目。
本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/80922360
博主地址是：http://blog.csdn.net/freewebsys