Vue+webpack单页面网站项目实战步骤分解

搭建基于vue+webpack单项目开发环境

(参考安装文档：https://cn.vuejs.org/v2/guide/installation.html)

一、基于vue+webpack的初始项目 目录分析

build  -- 打包要用的配置文件
config -- 框架的配置文件
dist   -- 将来打包成成的文件(上传的文件)
node-modules -- 模块文件
​
src    -- 前端开发的资源目录
    components -- 组件 **** 找对应组件放对应的数据
    router -- 路由跳转页面
    App.vue -- 框架最大的组件
​
static -- 静态文件：css js
index.html -- 首页

二、基于vue+webpack项目的执行流程分析

需求：

1>. 修改首页logo图标

// 修改App.vue 组件文件
<template>
  <div id="app">
      <!--注释img标签-->
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

 

2>. 修改首页欢迎文字

// 修改HelloWorld.vue组件文件
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
        //修改msg内容即可
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

3>. 把miniweb改版为基于vue+webpack的单页面应用项目

• 拷贝静态资源文件
  • 把miniweb项目的static 中的css,js, fonts三个文件夹拷贝到 vue-project /static 目录下
• 创建indexList.vue组件: src/components/indexList.vue
  • 修改template内容

<template>
    <div class="container" id="container">
            <table class="table table-hover">
                <tr v-for="i in list1">
                    <td>{{i.id}}</td>
                    <td>{{i.code}}</td>
                    <td>{{i.sname}}</td>
                    <td>4.40%</td>
                    <td>全新好</td>
                    <td>16.05</td>
                    <td><input type="button" value="添加" name="toAdd"></td>
                </tr>
            </table>
    </div>
</template>

•        修改css内容

//indexList.vue
<script>
</script>

     //在首页index.html中加载indexList.vue组件的样式 
     //修改 index.html 文件
    <link rel="stylesheet" href="static/css/bootstrap.min.css">

•        修改script内容

  <script>
    export default {
      name: "indexList",
      data() {
        return {
          // 组件的数据
        };
      }
    };
    </script>

• 组件导入、路由注册组件、使用
  • 提示： 修改的是index.js文件 (src/route/index.js)

    import Vue from 'vue'
    import Router from 'vue-router'
    // import HelloWorld from '@/components/HelloWorld'
    //导入组件
    import indexList from '@/components/indexList'
​
    Vue.use(Router)
​
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'indexList',
          // 注册组件  组件先导入 再注册 再使用
          component: indexList
        }
      ]
    })

• 删除App.Vue的默认样式效果
• 数据请求及跨域
  • 在src.main.js添加 内容

  • import axios from 'axios'
    Vue.prototype.axios = axios

    设置跨域代理( config/index.js)

  •     proxyTable: {
          '/apis': {
            target: 'http://192.168.14.49:7890', 
            changeOrigin: true,
            pathRewrite: {
                '^/apis': ''
            }              
        }
        },

    indexList.vue组件的script部分

  •   <script>
        export default {
          name: "indexList",
          data() {
            return {
              // 组件的数据
              list1: []
            };
          },
          mounted: function() {
            this.axios({
              url: "/apis/index_data",
              method: "get"
            })
              .then(dat => {
                this.list1 = dat.data;
              })
              .catch(function() {
                alert("出错了");
              });
          }
        };
        </script>