【从0到1打造vue element-ui管理后台 】 第一课 项目准备

第一课 项目准备

首先我们在做项目的时候需要先把开发环境、开发软件安装完毕，
然后我们把当搭建好的项目做标题、图标的修改，然后把vue.config.js进行初步的配置
这个项目用到了elemnet-ui、需要安装并且引入进来，然后请求接口需要安装axios、
然后创建data.json作为假数据进行开发、最后把多余的代码删除掉。

一、环境配置

1）安装node.js、npm、安装cnpm、安装git、安装vue-cli

二、项目搭建

2.1 安装项目
 
     vue create admin-manager

2.2 运行项目
    
    cd admin-manager
    
    npm run serve
   

三、初步编写项目

3.1 修改网站标题

    public/index.html 修改title标签内容、以及favicon.ico图片 

3.2 根目录创建vue.config.js 文件
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8888, //端口
    open: true, //是否启动后浏览器自动打开
    https: false, //
    host: "localhost" //主机名
  },
  lintOnSave: false,//是否在保存的时候使用 `eslint-loader` 进行检查
  productionSourceMap: false//打包时不生成map文件，加快打包构建
})

四、安装配置element-ui

cnpm i element-ui -S

在main.js中导入

import ElementUI from 'element-ui' import "element-ui/lib/theme-chalk/index.css" Vue.use(ElementUI)

五、封装Axios

cnpm i axios -S

在public/建立data.json(用来做假数据用)

[{    "id":1,    "bookname":"vue前端设计",    "price":58},{    "id":2,    "bookname":"vue前端设计",    "price":58},{    "id":3,    "bookname":"vue前端设计",    "price":58}]

在src/utils下，创建一个myaxios.js

import axios from 'axios'

axios.get("/data.json").then(resp=>{
    console.log(resp)
}).catch(err=>{
    console.log(err)
})

然后在components/HelloWorld.vue,清除里面所有的html与style样式，导入myaxios.js

import myaxios from '../utils/myaxios'

最后一步App.vue中的nav标签和style都删除

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

<style lang="scss">
</style>