1. 程式人生 > >美團全棧記錄

美團全棧記錄

全域性安裝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

在這裡插入圖片描述

在這裡插入圖片描述

在這裡插入圖片描述