《Vue全家桶+SSR+Koa2全栈开发美团网》学习笔记

一、

1.vue 3版本的安装

npm install -g @vue/cli

2.查看版本号

vue -V

3. 创建项目

vue create vue-learn

cd vue-learn

npm run serve

4.创建文件

cd vue-learn/

touch src/components/n.js

import Vue form 'vue'

Vue.directive('n',{

　　bind:function( el,binding ){

　　　　el.textContent = Math.pow( binding.vue,2 )

　　},

　　update:function( el,binding ){

　　　　el.textContent = Math.pow( binding.vue,2 )

　　}

})

5.计算属性

6.条件&列表渲染

7.事件处理

二、组件

1.子组件 $emit('patch',34)

2.父组件监听 @patch

npm install vue-router

import Vue form 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

cd src/

mkdir pages

touch pages/a.vue

touch pages/b.vue

 

const routes = [

　　{

　　　　path:'pagea,

　　　　component:pageA

　　}

]

const router = new VueRouter({

　　routes

})

export default router

 

import router form './router'

在项目主目录下建立vue.config.js文件，里面内容如下：

module.exports = {

　　runtimeCompiler:true

}

三、vuex基础

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const state = {

　　count:1

}

const mutations = {

　　increment(state){

　　　　state.count++

　　},

　　decrement(state){

　　　　state.count--

　　}

}

 

const actions = {

　　increment:({commit})=>{

　　　　commit('increment')

　　},

　　decrement:({commit})=>{

　　　　commit('decrement')

　　}

}

export default new Vuex.Store({state,mutations,actions})

在main.js中添加以下代码

import store from './store'

new Vue({

　　render : h => h(App)

　　store

}).$mount('#app')

在组件中使用

{{$store.state.count}}

import { mapAction } from 'vuex'

export default {

　　methods:mapAction([

　　　　'increment',

　　　　'decrement'

　　])

}

在store目录创建modules文件

a.js和b.js

const state = {

　　money:1

}

const mutations = {

　　add(state){

　　　　state.money ++ 

　　},

　　reduce(state){

　　　　state.money --

　　}

}

const actions = {

　　add:({commit})=>{

　　　　commit('add')

　　},

　　reduce:({commit})=>{

　　　　commit('add')

　　}

}

export default {

　　namespaced:true,

　　state,

　　mutations,

　　actions

}

src/store/index.js

import Vue from ’vue'

import Vuex from 'vuex'

import money from './modules/a'

import money from './modules/b'

Vue.use(Vuex)

export default new Vuex.Store({

　　modules:{

　　　　money,

　　　　count

　　}

})

 

<template>

page a {{ $store.state.money.money }}

</template>

<script>

import { mapActions } from 'vuex'

export default { methods:mapActions('money',['add','reduce']) }

</script>

 三、koa-generator

1、安装

npm install -g koa-generator

2、创建项目

koa2 project

eg: koa2 -e koa2-learn

npm run dev

四、mongod 

sudo brew install mongod

which mongod

mongod

可视化管理工具

Robo 3T

npm i mongoose

在koa2-learn中建立dbs目录，建立config.js文件，输入以下内容

ls

mkdir dbs

cd dbs/

touch config.js

mkdir models

module.exports={

　　dbs:'mongodb://127.0.0.1:27017/dbs'

}

touch models/person.js

let mongoose = require( 'mongoose' )

let personSchema = new mongoose.Schema(

　　name:String,

　　age:Number

)

module.exports = mongoose.model('Person',personSchema)

 

mongoose.connect(dbConfig.dbs,{

　　

})

post请求

curl -d 'name=lilei&age=27' http://localhost:3000/users/addPerson

 

Nuxt.js基础

Nuxt.js安装

vue init nuxt-community/koa-template <项目名称>

nrm use npm 

nrm ls

npm install --update-binary

npm install ajv@^6

 

三、实战准备

1、环境准备

node 8.12.0  node-v

vue 2.5.17    npm -v

npm 6.4.1     webpack -v

webpack 4.19.1

nuxt 2.00

2、项目安装

1）npm install -g npx

2) npx create-nuxt-app project-name

报错的话可以试试

先 npm install -g create-nuxt-app