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是当前路由地址对应的路由内容/是根路径

转载于:https://www.cnblogs.com/zhx119/p/9524511.html

vue-cli结构介绍相关推荐

Vue 项目结构介绍
Vue 项目创建完成后,使用 Web Storm 打开项目,项目目录如下: build 文件夹,用来存放项目构建脚本 config 中存放项目的一些基本配置信息,最常用的就是端口转发 node_mod ...
vue/cli 和 vue 版本对应及安装
文章目录 Vue Cli 使用方式: 关于Vue Cli版本介绍 @vue/cli 安装: 版本号对应查看vue和@vue/cli版本: Vue Cli Vue CLI = Vue + 一堆的js插 ...
cli vue 卸载,vue Cli 环境删除与重装教程 - 版本文档
vue-cli 卸载,版本选择,安装 · 检测(图文教程:vue Cli 环境删除与重装) 重要说明: vue-cli 3.0+版本,使用的不是vue-cli,而是@vue/cli: 如果用以上的安装 ...
vue Cli 环境删除与重装 - 版本文档
文章目录 vue-cli 卸载,版本选择,安装 · 检测(图文教程:vue Cli 环境删除与重装) 重要说明: vue-cli 的 `卸载:` vue-cli 的 `安装:` Vue CLI 官方介 ...
【Vue】—项目的目录结构介绍
[Vue]-项目的目录结构介绍
vue项目结构目录介绍
一:目录结构介绍二:项目介绍 build 文件夹及子目录这里面是一些webpack的配置,主要用于项目打包时的一些设置.这里不去更详细的深入,相关的文件及配置会在后面用到时在详细的介绍. co ...
【 Vue全家桶 · Vue CLI（四）】Vue项目的详细目录结构解析
文章目录前言 -- 一级目录解析一. dist 二. node_modules 三. public 四. src(基础版) 4.1 main.js 4.2 App.vue 4.3 src / as ...
Vue CLI的详细介绍与讲解
什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI. 在使用Vue.js开发大型应用时 ...
Vue Cli 项目结构简述
webnode_modules --Vue Cli 项目以来的js模块全放到这里public --存放静态资源存放自己的js cssfavicon.ico -- 浏览器小图标index.html - ...
dajngo3,vue3前端项目搭建,vue项目结构的介绍
前端项目搭建查看当前node版本 [dalaojun@localhost django_luichun]$ node -v v14.15.0 查看npm版本 [dalaojun@localhost ...

vue-cli结构介绍

vue-cli结构介绍相关推荐

最新文章

热门文章