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