4.新建vue项目newpc

Posted 2020-12-10 xuepangzi

新建vue项目newpc

1.安装node.js

2.新建项目newpc

在想要存放项目的目录下，按住shift键+鼠标右键，选择【在此处打开命令窗口】，打开cmd命令行窗口

为了下载包更快，可以先安装淘宝镜像cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

1.安装vue脚手架工具

cnpm install --global vue-cli

2.创建项目

vue init webpack newpc

除了Use Eslint……选no，其他都yes或者直接回车。

如果成功了，就会自动安装依赖库，如果不成功，可以自己手动安装依赖库。

3.自己手动安装依赖库

cd newpc
cnpm install

4.运行（输入Ctrl+C可以停止运行项目）

npm run dev

浏览器访问：

http://127.0.0.1:8080/#/

 

 新建完毕。

3.初始化项目组件目录

1.将src/components目录下的HelloWorld.vue组件删除

2.在src/components目录下新建目录和组件：

登录组件Login.vue

首页组件Index.vue

楼列表组件LouList.vue

单元列表组件DanyuanList.vue

住户列表组件ZhuhuList.vue

住户组件Zhuhu.vue

通用组件目录public/ 头部组件vheader.vue 脚部组件vfooter.vue

3.编辑src/components/Index.vue：

<template>
  <div id="index">
    <h2>{{msg}}</h2>
  </div>
</template>
<script>
export default {
  name: ‘index‘,
  data () {
    return {
      msg:‘首页‘
    }
  },
  methods:{
  }
}
</script>
<style>

</style>

4.修改src/App.vue为：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: ‘App‘
}
</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>

4.封装axios

1.安装axios

cnpm install axios --save

2.在src目录下新建目录api，在api目录下新建文件request.js和api.js

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
}

5.封装本地缓存模块

在src目录下封装本地缓存模块storage.js：

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;

 

6.安装配置饿了么出品的PC端网页UI库ElementUI

ElementUI组件官方文档

https://element.eleme.cn/#/zh-CN/component/installation

1.安装Element-ui：

cnpm i element-ui -S

2.在src/main.js中添加：

// element-UI 的使用
import ElementUI from ‘element-ui‘;
import ‘element-ui/lib/theme-chalk/index.css‘;
Vue.use(ElementUI);