对vue-cli各个目录的理解 和 在 vue 中使用json-server
看了几章书,看到了vue模板,看不下去哦,就找了一个B站的vue视频来看,下面进行总结。
学习一个语言,框架,CRUD..先学会。 重点就是最为常用的几个语句。学得不多,感慨挺多。。
前提:下载好vue-cli脚手架后
快速得到Restful api接口数据
vue3 ./config/index.js的port 修改端口。
使用json-server作为后台数据比较方便,在项目下 npm install json-server --save安装好后。
一般使用
"scripts": {
"json:server":"json-server --watch db.json",
"json:server:remote":"json-server http://jsonplaceholder.typicode.com/db"
},
修改db.json的scripts字段,就能比较快速的在本地启动json-server服务。
命令行: npm run json:server:remote jsonplaceholder是一个提供假json数据的服务。
对vue-cli各个目录的理解
- build 文件夹:构建项目相关
- config文件夹:项目相关配置
- static文件夹:static/ 目录下的文件并不会被Webpack处理:它们会直接被复制到最终的打包目录(默认是dist/static)下。static放不会变动的静态文件
- test文件夹:项目测试使用
- index.html 项目的入口html
- package.json
重点字段:
dependencies 生产环境依赖 npm install XXX --save-dev 安装
devDependencies 开发环境依赖 npm install XXX --save 安装
scripts 各种npm脚本命令定义:比如
npm run dev 就有
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
这句话大意就是利用 webpack-dev-server 读取webpack.dev.conf.js的信息,然后启动一个本地服务器。
- src 项目源代码
main.js vue项目的入口文件,加载各种公共的组件,比如vue-router,
App.vue 页面入口文件
router vue的路由管理
components vue的公共组件
关于vue-cli脚手架是怎么启动起来的,我想在下一篇博客中,仔细写明。
对vue-cli各个目录的理解 和 在 vue 中使用json-server的更多相关文章
- vue/cli的目录结构说明
node_modules:npm 加载的项目所需要的各种依赖模块. src:这里是我们开发的主要目录(源码),基本上要做的事情都在这个目录里面,里面包含了几个目录及文件: 1.assets:放置一些图 ...
- 六. Vue CLI详解
1. Vue CLI理解 1.1 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI,如果你在开发大型项目那么你需要它, 并且必然需要使用Vue CLI. 使 ...
- Vue CLI 是如何实现的 -- 终端命令行工具篇
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 ...
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- [转]Vue CLI 3搭建vue+vuex 最全分析
原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...
- Vue CLI 3搭建vue+vuex 最全分析
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- Vue CLI 5 和 vite 创建 vue3.x 项目以及 Vue CLI 和 vite 的区别
这几天进入 Vue CLI 官网,发现不能选择 Vue CLI 的版本,也就是说查不到 vue-cli 4 以下版本的文档. 如果此时电脑上安装了 Vue CLI,那么旧版安装的 vue 项目很可能会 ...
- vue cli的安装与使用
一.简介 vue作为前端开发的热门工具,受到前端开发人员的喜爱.为了简化项目的构建,采用vue cli来简化开发. vue cli是一个全局安装的npm包,提供了终端使用的命令.vue create可 ...
随机推荐
- vue-UI(mui和muit-UI)
MUI和MUIT-UI 这里使用了连个UI---mui和mit-ui mit-ui是基于vue.js的,而mui是一个高性能前端框架(H5+提供的),类似于bootstrap,所以在引入时区别还是很大 ...
- Linux下修改MySQL数据库数据文件路径
使用rpm安装方式安装完MySQL数据库后,数据文件的默认路径为/var/lib/mysql,然而根目录并不适合用于存储数据文件. 原路径:/var/lib/mysql 目标路径:/home/mysq ...
- inux 资源监控分析-pidstat
pidstat是sysstat工具的一个命令,用于监控全部或指定进程的cpu.内存.线程.设备IO等系统资源的占用情况.pidstat首次运行时显示自系统启动开始的各项统计信息,之后运行pidstat ...
- leetcode菜鸡斗智斗勇系列(4)--- 单一数字的乘积和总合的减法
1.原题: https://leetcode.com/problems/subtract-the-product-and-sum-of-digits-of-an-integer/ Given an i ...
- BP_Adaboost 模型及其分类应用
一.BP_ Adaboost模型 Adaboost 算法的思想是合并多个“弱”分类器的输出以产生有效分类.其主要步骤为 : (1)首先给出弱学习算法和样本空间(x, y) ,从样本空间中找出 m 组训 ...
- VS2019 开发Django(四)------models
导航:VS2019开发Django系列 继上篇我们匆匆迁移数据库成功之后,又花了一个晚上研究了Django的模型,这里的模型其实就是ORM模型中的Entity,.Net里边用的比较多的有Entity ...
- 关于Redis 二进制内容的 可视化尝试
二进制内容的 能否可视化? 网上的资料比较少啊! -------------------------------------------------------------------------- ...
- python中基本类型的连接组合和互相转换13种方式
本篇总结了一下字符串,列表,字典,元组的连接组合使用和类型的互相转换小例子,尤其列表中的extend()方法和字典中的 update方法非常的常用. 1.连接两个字符串 a = "hello ...
- ViewAnimator
ViewAnimator是一个基类,它继承了FrameLayout,因此它表现出FrameLayout的特征,可以将多View组件叠在一起.ViewAnimator额外增加的功能正如它的名字所暗示的, ...
- 团队项目之测试与发布(Alpha版本)
小组:BLACK PANDA 时间:2019.12.05 测试报告 1.测试找出的BUG 图片上传,文件过大会出错 用户可访问不具权限的URL 空字段导致异常 serializable反序列化时版本不 ...