看了几章书,看到了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各个目录的理解

  1. build 文件夹:构建项目相关
  2. config文件夹:项目相关配置
  3. static文件夹:static/ 目录下的文件并不会被Webpack处理:它们会直接被复制到最终的打包目录(默认是dist/static)下。static放不会变动的静态文件
  4. test文件夹:项目测试使用
  5. index.html 项目的入口html
  6. 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的信息,然后启动一个本地服务器。

  1. src 项目源代码

main.js vue项目的入口文件,加载各种公共的组件,比如vue-router,

App.vue 页面入口文件

router vue的路由管理

components vue的公共组件

关于vue-cli脚手架是怎么启动起来的,我想在下一篇博客中,仔细写明。

对vue-cli各个目录的理解 和 在 vue 中使用json-server的更多相关文章

  1. vue/cli的目录结构说明

    node_modules:npm 加载的项目所需要的各种依赖模块. src:这里是我们开发的主要目录(源码),基本上要做的事情都在这个目录里面,里面包含了几个目录及文件: 1.assets:放置一些图 ...

  2. 六. Vue CLI详解

    1. Vue CLI理解 1.1 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI,如果你在开发大型项目那么你需要它, 并且必然需要使用Vue CLI. 使 ...

  3. Vue CLI 是如何实现的 -- 终端命令行工具篇

    Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 ...

  4. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  5. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

  6. Vue CLI 3搭建vue+vuex 最全分析

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

  7. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  8. Vue CLI 5 和 vite 创建 vue3.x 项目以及 Vue CLI 和 vite 的区别

    这几天进入 Vue CLI 官网,发现不能选择 Vue CLI 的版本,也就是说查不到 vue-cli 4 以下版本的文档. 如果此时电脑上安装了 Vue CLI,那么旧版安装的 vue 项目很可能会 ...

  9. vue cli的安装与使用

    一.简介 vue作为前端开发的热门工具,受到前端开发人员的喜爱.为了简化项目的构建,采用vue cli来简化开发. vue cli是一个全局安装的npm包,提供了终端使用的命令.vue create可 ...

随机推荐

  1. vue-UI(mui和muit-UI)

    MUI和MUIT-UI 这里使用了连个UI---mui和mit-ui mit-ui是基于vue.js的,而mui是一个高性能前端框架(H5+提供的),类似于bootstrap,所以在引入时区别还是很大 ...

  2. Linux下修改MySQL数据库数据文件路径

    使用rpm安装方式安装完MySQL数据库后,数据文件的默认路径为/var/lib/mysql,然而根目录并不适合用于存储数据文件. 原路径:/var/lib/mysql 目标路径:/home/mysq ...

  3. inux 资源监控分析-pidstat

    pidstat是sysstat工具的一个命令,用于监控全部或指定进程的cpu.内存.线程.设备IO等系统资源的占用情况.pidstat首次运行时显示自系统启动开始的各项统计信息,之后运行pidstat ...

  4. leetcode菜鸡斗智斗勇系列(4)--- 单一数字的乘积和总合的减法

    1.原题: https://leetcode.com/problems/subtract-the-product-and-sum-of-digits-of-an-integer/ Given an i ...

  5. BP_Adaboost 模型及其分类应用

    一.BP_ Adaboost模型 Adaboost 算法的思想是合并多个“弱”分类器的输出以产生有效分类.其主要步骤为 : (1)首先给出弱学习算法和样本空间(x, y) ,从样本空间中找出 m 组训 ...

  6. VS2019 开发Django(四)------models

    导航:VS2019开发Django系列 继上篇我们匆匆迁移数据库成功之后,又花了一个晚上研究了Django的模型,这里的模型其实就是ORM模型中的Entity,.Net里边用的比较多的有Entity ...

  7. 关于Redis 二进制内容的 可视化尝试

    二进制内容的 能否可视化?  网上的资料比较少啊! -------------------------------------------------------------------------- ...

  8. python中基本类型的连接组合和互相转换13种方式

    本篇总结了一下字符串,列表,字典,元组的连接组合使用和类型的互相转换小例子,尤其列表中的extend()方法和字典中的 update方法非常的常用. 1.连接两个字符串 a = "hello ...

  9. ViewAnimator

    ViewAnimator是一个基类,它继承了FrameLayout,因此它表现出FrameLayout的特征,可以将多View组件叠在一起.ViewAnimator额外增加的功能正如它的名字所暗示的, ...

  10. 团队项目之测试与发布(Alpha版本)

    小组:BLACK PANDA 时间:2019.12.05 测试报告 1.测试找出的BUG 图片上传,文件过大会出错 用户可访问不具权限的URL 空字段导致异常 serializable反序列化时版本不 ...