美团项目 ---搭建环节1

❤ 项目源码 ❤
GitHub地址：https://github.com/Umbrella001/mtapp

一、项目搭建依赖版本一览

项目依赖版本，最好安装这个版本安装，为最稳定

二、项目搭建 – Nuxt部分

nuxt的升级2.0.0使用下面命令安装

npx@10.2.0

$ npm install -g npx
$ npx create-nuxt-app <project-name>

注意如果这里有个报错这样处理就行：
npx create-nuxt-app …时报错 安装 create-nuxt-app@latest 失败
解决：
① 亲测
先安装一下 npm install -g create-nuxt-app（当前版本为@2.9.2）然后再执行 npx create-nuxt-app <projext name>然后就行了

打开创建好的项目文件，点开里面的serve文件夹，在 index.js 中修改 const Koa = require('koa') 为import方式引入的话import Koa from 'koa'会出现报错

解释：
首先构建nuxt有两种方式，一种是模版的方式进行创建，第二种就是现在这种通过nuxt@2.0.0升级的脚手架构建方式进行构建nuxt文件，两种的区别：前者是通过babel进行处理后，所以里面是可以使用import进行导入内容的
后者是通过 npm run dev 方式启动项目，其中dev中的命令是这样的 "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server"，他是通过node进行服务器的启动更新并没有经过babel处理，所以是不支持import指令的，其中nodemon是监听和热更新的服务端脚本的，那我这个应该就不需要修改，我们应该考虑如何添加babel让它新增对import的识别:
看博客： https://blog.csdn.net/Umbrella_Um/article/details/98802192

进入css使用预编译器sass ，然后安装对应的依赖时在 <style lang='scss'> 会报错，
所以我们要安装一下对应的依赖 sass-loader 和 node-sass：

npm install sass-loader node-sass

注意如果安装过程中出现这个警告的话，建议安装对应的同级文件，避免使用eslint功能时出现部分失效问题 npm install esling@^3.18.0提示哪个版本就安装哪个版本（我的提示为eslint-plugin-vue@5.2.3 requires a peer of eslint@^5.0.0）：

三、项目搭建 – 数据库MongonDB + Redis

安装辅助工具：

mongodb 4.0.11 地址：https://www.runoob.com/mongodb/mongodb-window-install.html
redis Redis-x64-3.0.504.zip 地址：https://www.runoob.com/redis/redis-install.html
robomongo 2019.4.1 (02-Aug-2019) 地址：https://robomongo.org/
robomongo robo3t-1.3.1-windows-x86_64-7419c406.exe 地址：同上 https://robomongo.org/

配置：

使用ES6的import/export代替require 看博客：https://blog.csdn.net/Umbrella_Um/article/details/98802192

修改build配置（nuxt.config.js）：

  /*
  ** Global CSS
  */
  css: [
    'element-ui/lib/theme-chalk/reset.css',
    'element-ui/lib/theme-chalk/index.css',
    '@assets/css/main.css'
  ],
  ...
    /*
  ** Build configuration
  */
  build: {
    transpile: [/^element-ui/],
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
      if(ctx.isDev && ctx.isClient){
        config.module.rules.push({
          enforce: 'pre',
          test: /\/(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    },
    cache: true   // 开启缓存机制，增加再编译速度
  }

四、学习笔记

① （window）在 bash.bashrc 中末尾添加了 alias vue='winpty vue.cmd'，这样可以解决git Bash中不能上下选择的，但是如果不是vue的话，就需要通过传统的方法进行选择，一个是通过数字，对于有括号的则需要使用提示中的 空格space选择，a全选，i反选

② require 是ES5导包用的比较不好看也不方便，所以现在多数都是用 import/export 这种格式进行导入导出
类比一下：register 注册别名或者插件名为ES5方式，而 create 则为ES6格式

③ 使用预编译sass时需要导入固定依赖 sass-loader 和 node-sass，其中使用引入的方式为这种格式@import '...'

④ 使用nuxt框架进行vue的开发时，一开始就是要配置一下improt导包的格式，也就是如何修改 package.json 里面的dev和start，还有如何给babel建立指令集 presets:es2015

❤ 项目源码 ❤
GitHub地址：https://github.com/Umbrella001/mtapp