在想要存放项目的目录下,按住shift键+鼠标右键,选择【在此处打开命令窗口】,打开cmd命令行窗口
为了下载包更快,可以先安装淘宝镜像cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install --global vue-cli
vue init webpack newpc
除了Use Eslint……选no,其他都yes或者直接回车。
如果成功了,就会自动安装依赖库,如果不成功,可以自己手动安装依赖库。
cd newpc
cnpm install
npm run dev
浏览器访问:
http://127.0.0.1:8080/#/
新建完毕。
登录组件Login.vue
首页组件Index.vue
楼列表组件LouList.vue
单元列表组件DanyuanList.vue
住户列表组件ZhuhuList.vue
住户组件Zhuhu.vue
通用组件目录public/ 头部组件vheader.vue 脚部组件vfooter.vue
<template>
<div id="index">
<h2>{{msg}}</h2>
</div>
</template>
<script>
export default {
name: 'index',
data () {
return {
msg:'首页'
}
},
methods:{
}
}
</script>
<style>
</style>
<template>
<div id="app">
<v-header></v-header>
<router-view/>
<v-footer></v-footer>
</div>
</template>
<script>
import Header from './components/public/vheader.vue';
import Footer from './components/public/vfooter.vue';
export default {
name: 'App',
components:{
'v-header':Header,
'v-footer':Footer
}
}
</script>
<style>
/* 公用的样式 */
*{
margin: 0;padding: 0;box-sizing: border-box;
}
body{
font:14px "HanHei SC","PingFang SC","Avenir Next",Avenir,"Helvetica Neue",Helvetica,"Lantinghei SC","Hiragino Sans GB","Microsoft YaHei",微软雅黑,STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif;
}
</style>
cnpm install axios --save
request.js:
import axios from 'axios'
// 请求超时时间
axios.defaults.timeout = 15000;
// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
export function get(url, params) {
return new Promise((resolve, reject) => {
axios.get(url,
{
params: params
})
.then(res => {
resolve(res.data);
})
.catch(err => {
if (!err.response) {
Message({
showClose: true,
message: 'get请求错误',
type: 'error'
});
} else {
reject(err.data);
console.log(err.response, '异常2');
}
})
});
}
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(res => {
resolve(res.data);
})
.catch(err => {
if (!err.response) {
Message({
showClose: true,
message: 'post请求错误',
type: 'error'
});
} else {
reject(err.data);
console.log(err.response, '异常2');
}
})
});
}
export default axios
api.js:
import { get, post } from './request'
const host='http://127.0.0.1:8000'
const media_host='http://127.0.0.1:8000/media/'
export {
host,
media_host
}
var storage={
set(key,value){
// 设置为本地缓存方法
localStorage.setItem(key,JSON.stringify(value));
},
get(key){
// 获取本地缓存方法
return JSON.parse(localStorage.getItem(key));
},
remove(key){
// 删除本地缓存方法
localStorage.removeItem(key);
}
}
export default storage;
ElementUI组件官方文档
https://element.eleme.cn/#/zh-CN/component/installation
cnpm i element-ui -S
// element-UI 的使用
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
// 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'
Vue.config.productionTip = false
// element-UI 的使用
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})