仿写美食杰项目第一篇

数据 -> mongodb

1. 启动数据库
2. 查询数据库 show dbs
3. 使用数据库 use dbName
4. 查询数据表 show collections

注意

1. 不写后台代码，不需要关心后台逻辑，关注于数据展示
2. 会看 api 接口文档 会编写文档更好 （showDoc）
3. 只关注发送和接收数据，再是写页面

使用技术栈

1. vue2.x vue-router vueX
2. 脚手架 @vue/cli
3. 请求库 -> axios
4. UI 组件库 -> elementUI
5. css 预处理 -> stylus(less, sass)
6. 后端服务 -> node.js
7. 数据库 -> mongodb (4,5 我们不关注)

一、创建项目（初始化项目）

1. 下载安装 vue create meishijie
2. 选择 vuex 、router 、css 预处理器、lint、babel（将 es6 的代码解析成 es5,解决兼容问题）、
3. 会自动执行 npm install
4. 进入项目目录，执行 npm run serve 去启动项目 cd meishijie
5. 访问网页地址是 默认是 http://localhost:8080/

项目目录说明：

1. public/index.html -> 网页模板
2. 配置文件
   1. .browserslistrc 关于浏览器的配置，主要解决浏览器兼容问题
   2. .eslintrc.js 配置 eslint 规则
   3. .gitignore 配置 git 上传忽略文件
   4. babel.config.js 设置 babel 做 js 代码兼容 es6 -> es5
   5. jsconfig.json 对于 js 配置文件
   6. vue.config.js 整个项目的配置文件（更多是关于 webpack 的配置）
   7. package.json 整个目录描述,生产依赖和开发依赖等信息
3. src 放源代码

Src 目录

源码及业务逻辑

下载插件 elementUI axios

1. 下载

npm install element-ui axios --save

2. 配置 element-ui

// ./src/main.js
// 引入UI组件
import ElementUI from "element-ui";
// 引入样式
import "element-ui/lib/theme-chalk/index.css";

// 安装elementUI
Vue.use(ElementUI);

删除冗余代码

1. homeView.vue 只保留最基础内容
2. 删除组件 HelloWorld.vue 、AboutView.vue
3. 删除 App.vue 中的导航
4. 删除router/index.js中的多余代码,只保留首页路由
5. 如果有 eslint 报错，解决方案：
   • 在 vue.config.js 做配置 lintOnSave: false
   • 先中止项目，使用 lint 修复 运行 npm run lint --fix,然后再启动项目

注意：

修改 vue.config.js 中的配置，修改后一定要重启项目，否则修改的配置不生效。

注意 @vue/cli 版本：

// vue.config.js
// @vue/cli 版本是 > 5+
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  // 保存时不做 lint 检测，上传时 需要 修复代码 执行 `npm run lint --fix`
  lintOnSave: false,
});

// @vue/cli 版本是 < 5.xx  > 3.xx
// module.exports = {
//   lintOnSave: false,
// }