zoukankan      html  css  js  c++  java
  • vue-cli结构介绍

    vue-cli是vue项目开发的脚手架,非常方便,其结构大致如下,

    其中static是存放静态资源的,存放的静态数据可以访问到,如果在static文件夹中创建mock文件夹,在mock文件夹中创建index.json,这样运行的vue-cli不仅开通的服务器http://localhost:8080中输入http://localhost:8080/static/mock/index.json可以访问mock文件夹中的index.json的文件内容。

    通常ajax 的api的接口通常是“/api/index.json”vue-cli中的我们可以模仿一个后台的接口实现这样后台接口的效果。

    在vue-cli 中config文件夹中有index.js文件中有“proxyTable”,是空对象,可以在这个空对象中做出如下配置:

    这里fastclick 通过npm install fastclick --save下载,stylus 和stylus-loader也是采用如此方法,项目中使用vue-awesome-swiper轮播插件,通过刚才的方式下载,因为是vue插件,需要使用vue.use(VueAwesomeSwiper)这种方式,这样全局都可以使用这个插件了

    proxyTable: {
    '/api':{
    target:'http://localhost:8080',
    pathRewrite:{
    '^/api':'/static/mock'
    }
    这样我们就可以使用这个api了,非常方便。
    src 下的assets文件夹中是存放静态资源的地方,像css,图片都可以放在这里;
    // 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'
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import fastClick from 'fastclick'
    import 'styles/reset.css'
    import 'styles/border.css'
    import 'styles/iconfont.css'
    import 'swiper/dist/css/swiper.css'

    Vue.use(VueAwesomeSwiper)
    fastClick.attach(document.body)
    Vue.config.productionTip = false

    /* eslint-disable no-new */
    new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
    })
    //路由是根据网址的不同,返回不同的内容给用户 App.vue是根组件,router-view是当前路由地址对应的路由内容/是根路径

  • 相关阅读:
    JavaScript 基础,登录前端验证
    CSS实例:图片导航块
    导航,头部,CSS基础
    web基础,用html元素制作web页面
    web基础
    timestamp与timedelta,管理信息系统概念与基础
    datetime处理日期和时间
    Linux操作系统编程 实验五 块设备实验
    Linux操作系统编程 实验四 字符设备实验
    Linux操作系统编程 实验三 模块编程实验
  • 原文地址:https://www.cnblogs.com/zhx119/p/9524511.html
Copyright © 2011-2022 走看看