望着时间滴答滴答的流过,我不曾改变过 . . .

对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各个目录的理解

  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脚手架是怎么启动起来的,我想在下一篇博客中,仔细写明。

posted @ 2019-09-16 11:42  whyaza  阅读(436)  评论(0编辑  收藏  举报