美團全棧記錄
全域性安裝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