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