一切都是浮云

# Vue单页面应用(SPA)开发

# 搭建vue开发环境

下载vue官方脚手架（开发环境）

# 步骤

  1. 全局安装vue命令行工具
npm install  @vue/cli -g
//或者
cnpm install @vue/cli -g
//或者
yarn global add @vue/cli
  1. 全局安装vue命令行初始化工具
npm install  @vue/cli-init -g
//或者
cnpm install @vue/cli-init -g
//或者
yarn global add @vue/cli-init
  1. 检测vue命令行是否安装成功

建议使用cnpm安装上面的命令行，速度会快一些。

vue -V

# 创建vue单页面应用脚手架

  1. 新建vue项目webpack模板
vue init webpack 填写你的项目名称

? Project name hello ? Project description A Vue.js project ? Author 龚贤 <xianweb@qq.com> ? Vue build standalone ? Install vue-router? No ? 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 crea ted? (recommended) no

  1. 接下来的步骤

    1. 进入项目文件 cd hello
    2. 安装项目依赖 cnpm install
    3. 运行项目 npm run dev

# vue官方脚手架（开发环境）介绍

  • build： 它是webpack构建配置文件夹，这些开发过程中，一般很少改动。
  • config：开发配置文件，比如在这里可以配置，浏览器自动打开
// config/index.js 大概在18行的位置，把false改成true。
{
  autoOpenBrowser: true
}
  • node_modules: 项目需要的所有依赖（模块）
  • src: 项目源代码文件夹，也就是说你项目的源代码都放在这里，这也是打交道最多的文件夹。
  • static： 静态资源文件夹，通常放不会改变的资源，比如logo图片，重置样式reset.css。
  • .babelrc：这是babel插件的配置文件，这是es6，es7转es5插件。
  • .editorconfig：代码风格配置
  • .gitignore: 这是git的黑名单文件，在这里填写你不想分享的文件。
  • .postcssrc: 这是postcss插件的配置文件，和less有些相似。
  • index.html：首页文件，单页面应用，其实指就是一个页面的应用。
  • package.json：项目依赖清单文件，分发项目时，去掉node_modules，因为有清单文件在，你只需重新cnpm install，然后cnpm run dev运行即可。
  • README.md：自述文件，它是markdown文件，通常用来描述项目的文件。

# src文件夹下介绍

  • assets：资源文件夹，通常用来放图片，LOGO，样式，图标文件，字体文件等等
  • components：组件文件夹，通常用来放公共的组件，比如（按钮组件，导航组件，标签组件等等）
  • pages: 页面级组件文件夹，里面放的都是页面组件，通常是局部组件。
  • App.vue：主界面组件，你也可以不叫这个这个名字，比如取名Home.vue。
  • main.js：入口js文件，非常重要，不要随便改名，会导致项目无法启动。
  • utils: 工具类文件夹，通常放一些工具，比如日期函数，公历转农历。

# vue单页面开发起步

  1. src下必须要有一个入口js（main.js）

  2. 当你有了main.js之后，那么页面不会报错，但是页面一片空白，接下来我们需要再页面中输出点什么。

//main.js
document.getElementById('app').innerHTML='<h1>hello spa</h1>';
  1. 使用vue框架写法
import Vue from 'vue';

//创建一个vue实例
var app = new Vue({
    el: '#app',
    data: {
        msg: 'hello spa'
    },
    template: `
        <h2>{{msg}}</h2>
    `
})

# import 导入 和 export 导出

  1. 当你导出变量时，会自动把所以变量放入到一个对象中，然后你导入的时候，需要是es6解析对象的方式结构。
// export 导出
//1.导出变量
export var name = '张飒';
export var shuiguo = ['苹果','桔子'];
//2.导出函数
export function add(a,b){
    return a+b;
}

//3. 导出对象
export var obj = {
    name: '张三',
    age: 30
}

//import 导入
import { name, shuiguo, add, obj } from '模块地址';

//1. 字符串
console.log( name );
//2. 数组
console.log( shuiguo );
//3. 函数
console.log( add(5,6) );
//4. 对象
console.log( obj );

# export default 导出默认

有时候我们不愿意给导出取名，这个时候我们可以使用default 关键字，但是要注意一般 只能使用一个 default。

当你使用export default形式导出时，注意导入的时候这个名字由你决定（自定义）。

一个页面只能一个export default

//导出默认，注意一个页面只能一个export default
export default '李四';
export default ['苹果','桔子'];
export default {
    name: '张三',
    age: 30
}
export default function(a,b){
    return a+b;
}

# 在单页面应用部署vue-router插件

  1. 下载vue-router插件
npm install vue-router -S
//或者
cnpm install vue-router -S
//或者
yarn add vue-router
  1. 在main.js导入路由组件
import Vue from 'vue';

//导入路由组件
import VueRouter from 'vue-router'

# vue项目构建流程

  1. 新建vue项目
vue init webpack vivo

  1. 项目运行起来后，删除src文件夹里面所有文件

  2. 在src文件夹新建main.js

  3. 在main.js中导入vue框架并且创建一个vue实例

import Vue from 'vue';

new Vue({
	el:'#app',
	template:`<h2>hello vue</h2>`
})

  1. 上面直接在模版中输入html代码，使得main.js过重，并且没有语法着色，快速输入功能，我们可以将这块内容交给一个 App.vue的组件，这个组件我们称之为入口页面组件。

  2. 现在我们在创建一个App.vue，第一步：在src文件夹中新建一个pages文件夹，用于存放所有页面级组件。

  3. 接上第二步，在pages文件夹创建一个App.vue，组件内容为下：

<template>
	<h2>主界面</h2> 
</template>

<script>
/*  pages/App.vue   */
export default {
	
}
</script>
  1. 在main.js 中导入刚才新建的 App.vue 组件，代码如下
import Vue from 'vue';

import App from './pages/App';
new Vue({
	el:'#app',
	template:`<App />`,
	components: {
		App
	}
})

  1. 接下来完成vue-router组件的对接

  2. 安装vue-router组件

cnpm install vue-router -S
  1. 在src文件夹中创建router文件夹，然后在router文件夹创建index.js

12.在src/router/index.js中写入代码，代码如下：

import Vue from 'vue';

import VueRouter from 'vue-router';
Vue.use(VueRouter);

var router = new VueRouter({
	linkActiveClass:'active',
	routes: []
})

export default router;

13.然后再main.js中vue实例挂载我们的路由实例

import Vue from 'vue';

import router from './router';

import App from './pages/App';
new Vue({
	el:'#app',
	template:`<App />`,
	components: {
		App
	},
	router
})
  1. 部署完成

# vue2.0 引入font-awesome

网上的大部分教程复杂而且难看懂，其实两步就能搞定。

  1. 安装font-awesome
cnpm install font-awesome -S
  1. 然后在main.js引入font-awesome
import Vue from 'vue';

//引入fa字体图标
import 'font-awesome/css/font-awesome.min.css';
  1. 组件内部调用
<template>

    <button>
        <i class="fa fa-bars"></i>
    </button>

</template>

# vue安装使用swiper轮播组件

  1. 下载安装swiper
cnpm install swiper -S
  1. 安装dom结构
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
  1. 载入swiper公共样式，可以再main.js，这样是全局载入。
import Vue from 'vue'
import 'swiper/dist/css/swiper.css';
  1. 载入swiper插件，并初始化swiper插件
import Swiper from 'swiper';
export default {
    data(){
        return {

        }
    },
    mounted(){
        //通常是再挂载之后，初始化swiper组件
        new Swiper('.swiper-container',{
            loop: true,
            pagination: '.swiper-pagination'
        })
    }
}

# 封装swiper为轮播组件

<template>
    <!-- slide start -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in data">
                <a :href="item.url"><img :src="item.src" class="img-responsive"></a>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <!-- slide end -->
</template>

<script>
import Swiper from 'swiper';
export default {
    props:{
        data: Array
    },
    mounted(){
        new Swiper('.swiper-container',{
            autoplay: {
                disableOnInteraction: false
            },
            pagination: {
                el: '.swiper-pagination'
            }
        })
    }
}
</script>

# Vue中使用mockJS

目前主流开发模式是前后端分离开发，前端在开发过程中，后端的接口还没有完成，这时我们前端可以制作一些模拟数据，我们可以使用mock插件来制作模拟数据。

  1. 安装mockjs
cnpm install mockjs -S

  1. 在src创建一个api文件夹，在api中创建一个mockjs文件

  2. 在项目中的mock.js文件中，写入模拟的数据。

//参照mockjs的文档，进行操作
// 配置 Mock 路径
require.config({
    paths: {
        mock: 'http://mockjs.com/dist/mock'
    }
})
// 加载 Mock
require(['mock'], function(Mock){
    // 使用 Mock
    var data = Mock.mock({
        'list|1-10': [{
            'id|+1': 1
        }]
    })
    // 输出结果
    document.body.innerHTML +=
        '<pre>' +
        JSON.stringify(data, null, 4) +
        '</pre>'
})

我们在mockjs中进行以下编写

//引入mockjs
const Mock = require('mockjs')
//使用mockjs模拟数据
Mock.mock('/api/data', (req, res) => {
    return {
        data: ['a','b']
    }
})

同时，不要忘记了，需要在main.js里面引入该文档

require('./mock')//此部分引入的是我们所编写的mockjs文档

# vue单页面开发部署axios步骤

  1. 安装axios
cnpm install axios -S
  1. 因为在项目中很多页面都会用到ajax请求，所以最后给它全局部署，也就是说任何地方都可以直接使用，而不需要每次用都要载入。

在main.js中导入axios.js

import Vue from 'vue';

import axios from 'axios';

/*全局安装，我们可以把axios挂载到vue实例的全局属性中*/
axios.defaults.baseURL = 'http://www.jx-tongan.com/vueapi/';
Vue.prototype.axios = axios;
  1. 在其他页面调用时，参考如下代码：
       methods: {
           getList(){
               //调用时直接this.$http就可以拿到axios对象
               this.$http.get('get_article_list.php').then( res => {
                   this.article = res.data;
               })
           },
       }
  1. 在登录页面调用时，参考如下代码：

没有token 的登录接口

const login = {
    suLoginname: this.login.suLoginname,
    suPwd: this.login.suPwd
}
//全局的方式可以去掉api
axios.post('/api/singleProject/login',login)
    .then(res => {
    console.log(res.data)
    this.$router.push({
        path: '/home'
    })
}).catch(err => {
    console.log(err)
    this.$router.push({
        path: '/404'
    })
})

main.js

import axios from 'axios'
axios.defaults.timeout = 5000 // 请求超时
axios.defaults.baseURL = '/api/'  // api 即上面 vue.config.js 中配置的地址
Vue.prototype.axios = axios  //请求以 this.axios.get() 可以去掉请求接口api

//生产环境 bulid
axios.defaults.timeout = 5000 // 请求超时
axios.defaults.baseURL = 'http://api.demourl.com/'  //写服务器地址

//main.js   拓展知识
import axios from 'axios'
// 配置请求的跟路径
axios.defaults.baseURL = 'http://180.76.189.68:8911'
Vue.prototype.$http= axios    //封装接口  请求以 this.$http.get()

# axios 封装

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 15000 // 请求超时时间
})

// 添加请求拦截器
service.interceptors.request.use(config => {

    //在发送请求之前做些什么
  return config
  
}, error => {

   //对请求错误做些什么
  Promise.reject(error)
  
})


//添加响应拦截
service.interceptors.response.use(response => {

      //对响应数据做些什么
      return response.data
      
  },
  error => {
  
      //对响应错误做些什么 
     return Promise.reject(error)
     
  }
)

//暴露出去
export default service

# vueconfig.js

module.exports = {
	runtimeCompiler: true,
	publicPath: "./",  // 设置打包文件相对路径
	devServer: {
        // open: true,
        // host: 'localhost',
        port: 8080,
        https: false,
        //以上的ip和端口是我们本机的;下面为需要跨域的
        proxy: {//配置跨域
            '/api': {
                 //这里后台的地址模拟的;应该填写你们真实的后台接口
                target: 'http://180.76.189.68:8911/',
                ws: true,
                changOrigin: true,//允许跨域
                pathRewrite: {
                    '^/api': ''//请求的时候使用这个api就可以
                }
            }
            
        }
    }
}

←