美团全栈记录

全局安装koa脚手架
npm install -g koa-generator

创建
koa2 -e pro名称

进入并安装
cd koa2-learn && npm install

koa项目跑起来
SET DEBUG=koa* & npm start koa2-learn

koa的global 相当于js的window

用npm run dev启动-修改后能自动重启

async转化为异步方法
await用同步的概念解决异步,后面跟着promise对象(不是也会自动转换)

//为了使用redis而安装2个中间件
npm i koa-generic-session koa-redis

//全局安装vue
npm install -g @vue/cli-init

最新版本会有问题,降低nuxt版本到1.4.2
npm uninstall nuxt
npm install [email protected]

安装项目
vue init nuxt-community/koa-template nuxt-learn

nuxt-link等于router-link

nuxt.js的好处是创建即配置
asyncData处理组件数据
fetch处理vuex数据

由于asyncData方法是在组件 初始化 前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象。

//全局安装nuxt.js自带的模板
npm install -g npx

//创建项目
npx create-nuxt-app mt-app

//使用babel需先全局安装
npm install -g babel-cli

注意:官方提供的脚手架要安装修改2个地方
在这里插入图片描述

在创建的项目使用es6

在script的dev和start最后面+
 --exec babel-node
//直接在目录创建.babelrc
.babelrc
//.babelrc内容为
{
  "presets": ["es2015"]
}
//安装
cnpm install babel-preset-es2015
安装sass相关2个包
npm i sass-loader node-sass --save

修改:nuxt.config.js
添加css
css: [
‘element-ui/lib/theme-chalk/reset.css’,
‘element-ui/lib/theme-chalk/index.css’
// ‘~assets/css/main.css’
],
build内最下面加缓存:
cache:true

全局安装npm的淘宝镜像(所有的npm慢或者出错都可以用cnpm试)
npm install -g cnpm --registry=https://registry.npm.taobao.org

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_27064559/article/details/84993691