npm(nodejs package manager)、webpack、Vue组件、Vue脚手架开发工具、Vue Router的使用、Vuex的使用、使用Django前后端交互

使用命令行安装包:
1. cd切换到项目目录下，执行初始化操作 npm init/npm init -y
2. 安装其他依赖包
npm install jquery
npm install jquery@1.11.13
npm install jquery -g       全局安装
npm install bootstrap@3 -D  开发环境下
marked包安装和使用    npm install marked -D   
npm install vuex -D
3. 卸载包     npm uninstall 包名
4. 更新npm    npm install npm@latest 
5. npm安装包慢的解决办法：
    1.安装cnpm包 ：https://npm.taobao.org/
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    2. 配置npm源为阿里源
    npm config set registry https://registry.npm.taobao.org/

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    meta http-equiv="X-UA-Compatible" content="ie=edge">
    title>Documenttitle>
head>
body>
    script src="./node_modules/jquery/dist/jquery.min.js">script>
    script>
        $.each([11,22,33], function(k,v){
            console.log(k,v)
        })
    script>
body>
html>

为什么要有webpack？
1. JS中不存在模块化的概念
2. 安装和使用
npm install webpack -g          --> 全局安装
npm install webpack-cli -g
3. webpack进阶：https://webpack.js.org/

var alex = ‘sb‘;
var login = true;
module.exports = {alex}

var obj = require(‘./x‘)
var jquery = require(‘jquery‘)
console.log(obj);   //sb
jquery.each([11,22,33,44], function(k,v){
    console.log(k,v)
})

body>
script src="./dist/main.js">script>
body>

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
head>
body>
    div id="app">
        button-counter>button-counter>
        button-counter>button-counter>
        button-counter>button-counter>
        component-a>component-a>
        ComponentB             //父组件向子组件通信
            v-for="a in aList"
            v-bind:url="a.url"
            v-bind:title="a.title"
        >ComponentB>
       p> 被选了{{num}}次！p>     
        ComponentC
            v-for="name in nameList"
            v-bind:name="name"
            v-on:do="foo"
        >ComponentC>  
        table>                 //组件的is属性
          
        tr is="ComponentB">tr>  //此时组件中template中的tr会显示在table中的tbody中
        table>
    div>
    script src="./node_modules/vue/dist/vue.js">script>  
    script>
        //全局注册组件：定义一个名为button-counter的新组件
        Vue.component(‘button-counter‘, {
        /* data: {
            count: 0
            } */
        data: function (){      //data 必须是一个函数,不能直接是对象，组件复用时会影响到其他实例
            return {
                count: 0
            }
        },
        template: ‘你点了我 {{ count }} 次。‘
        })
        //局部注册组件：局部注册的组件在其子组件中不可用，如果你希望ComponentB在ComponentA中可用，需声明
        const ComponentA = {
             components: {
                ComponentB
            },
            template: `a href=‘https://www.sogo.com‘>点我/a>`,
            data: function(){
                return {  
                }
            }
        }
        //父组件向子组件通信
        const ComponentB  = {
            //template: ` `,通过插槽slot分发内容
            //template: ` `,组件的is属性
            template: `p>a v-bind:href=‘url‘>{{title}}/a>/p>`,
            props: {            //在子组件中使用props声明将url、title传入组件template并显示
                url: String,     //对传值进行校验
                title: {
                    type: String,
                    required: true
                }
            },
            data: function(){
                return {
                
                }
            }
        }
         //子组件向父组件通信
        const ComponentC = {
            //子组件可以通过调用内建的 $emit 方法 并传入事件名称来触发一个事件
            template: `button v-on:click=‘$emit("do")‘>{{ name }}/button>`,
            props: {        //使用props声明将name传入组件template并显示
                name
            },
            methods: {
                do(){
?
                }
            }
        }
        var vm = new Vue({
            el: ‘#app‘,
            components:{        //局部注册组件需要在components中声明
                ‘component-a‘: ComponentA,
                ComponentB,
                ComponentC
            },
             data: {
                num:0,
                nameList: ["技师A", ‘技师B‘, ‘技师C‘],
                aList: [
                    {
                        url: ‘https://www.sogo.com‘,
                        title: ‘sogo‘
                    },
                    {
                        url: ‘https://www.luffycity.com‘,
                        title: ‘luffycity‘
                    },
                    {
                        url: ‘http://www.oldboyedu.com/‘,
                        title: ‘oldboy edu‘
                    },
                ]
            },
            methods: {
                foo(){
                    this.num += 1;
                }
            } 
        })
    script>
body>
html>

1. 安装
npm install -g vue-cli
2. 使用
查看安装的vue-cli版本：vue -V
查看帮助：vue --help
查看支持的模板：vue list
3.创建Vue项目
webpack简单模板：vue init webpack-simple app01
webpack模板：(使用Bootstrap时候要用这个):vue init webpack vueapp01
    ? Project name vueapp01                     ‘回车确认‘
    ? Project description A Vue.js project        ‘回车确认‘
    ? Author Lmy              ‘回车确认‘
    ? Vue build (Use arrow keys)                
    ? Vue build (standalone)
        > Runtime + Compiler: recommended for most users    ‘回车确认‘
        Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are              ONLY allowed in .vue files - render functions are required elsewhere
    ? Install vue-router? ‘Yes‘
    ? Use ESLint to lint your code? ‘No‘
    ? Set up unit tests No ‘(设置单元测试)‘
    ? Setup e2e tests with Nightwatch?  ‘No‘   ‘（用夜视器设置e2e测试?）‘
    ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)    ‘（npm）‘
        > Yes, use NPM    ‘回车确认‘
        Yes, use Yarn
        No, I will handle that myself
    。。。。（ vue-cli · Generated "vueapp01".）。。。。（Installing project dependencies ...）。。。。 Project initialization finished!。。。。。。
‘‘‘To get started:
  cd vueapp01
  npm run dev‘‘‘
C:\untitled>cd vueapp01
C:\untitled\vueapp01>npm run dev ‘(启动前端服务)‘‘ Your application is running here: http://localhost:8080‘
停止项目：Ctrl + C 
4.在当前项目下安装bootstrap
C:\untitled\vueapp01>npm install bootstrap@3.3.7 -D  或者  npm install bootstrap@3.3.7 --save-d
‘安装开发环境下的bootstrap，并将依赖关系写入package.json中‘

"/foo">Go to Foo#默认渲染成a标签
#路由视图，组件显示位置

template>
    div>
        h1>这是home页面h1>   //vue文件中，组件template一定要用div包裹所有标签
    div>
template>
?
script>
export default {
    name:‘Home‘,
}
script>
?
style>
?
style>
?

template>
    div>
        h1>这是note页面h1>
    div>
template>
?
script>
export default {
    name:‘Note‘,
}
script>
?
style>
style>

import Vue from ‘vue‘
import Router from ‘vue-router‘
import HelloWorld from ‘@/components/HelloWorld‘
import Home from ‘@/components/Home.vue‘  //从组件导入，@代表src
import Note from ‘@/components/Note.vue‘ 
?
Vue.use(Router)
?
export default new Router({
  mode:‘history‘,                       //去掉URL中的‘#‘
  routes: [                             //设置组件路由对应关系
    {
      path: ‘/home‘,
      name: ‘我的home页面‘,     
      component: Home
    },
    {
      path: ‘/note‘,
      name: ‘我的note页面‘,
      component: Note
    }
  ]
})

li>router-link to="/home">link home版router-link>li>
li>router-link to="/note">link note版router-link>li>
router-view>router-view>

router-link
          to="/home" 
          tag="li"               #指定生成li标签
          active-class="active"   #指定标签被点击时的样式
        >
          a href="">link home版a>
        router-link>
 router-link
          to="/note" 
          tag="li"               
          active-class="active"   
        >
          a href="">link note版a>
        router-link>
router-view>router-view>

router-link
    v-for="(item,index) in allRouters"
    v-bind:to="item.path"
    tag="li"
    active-class="active"    
    v-bind:key=index
        >
    a href="">{{ item.name }}a>
router-link>
router-view>router-view>  
?
script>
import ‘bootstrap/dist/css/bootstrap.min.css‘
export default {
  name: ‘App‘,
  // 计算属性
  computed:{
    allRouters(){   // 当前Vue实例注册的所有路由
      return this.$router.options.routes
    }
  }
}
script>

import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘  //导入路由对象
?
Vue.config.productionTip = false
?
/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,           //注册路由对象
  components: { App },
  template: ‘‘
})

import Vue from ‘vue‘
import Vuex from ‘vuex‘
?
Vue.use(Vuex)
// 开一家商店
export default new Vuex.Store({
    state: {
      count:0
    },
    mutations:{             //提交 mutation来更改 Vuex 的 store 中的状态
      increment(state){
        state.count+=1
      }
    }
  })

import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import store from ‘./store‘
?
Vue.config.productionTip = false
?
/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,   //注册路由对象
  store,    //向vue实例注册我的商店
  components: { App },
  template: ‘‘
})

template>
  div
  class="list-group-item"
  v-on:click="foo"
  >
  {{n}}
  div>
template>
?
script>
export default{
    name:‘NoteItem‘,
    props:{
      n:String
    },
    methods:{                   //v-on监听事件使用method
      foo(){                  //子组件被点击时向父组件传值 ，使用$emit()传递事件，告知父组件子组件被点击
       // this.$emit(‘plus‘)   //使用子组件向父组件传值时使用$emit，使用vuex时注释此项
       //this.$store.state.count+=1      //使用vuex,在被点击时修改store中的count
       this.$store.commit(‘increment‘)  //使用vuex,在被点击时提交事件increme
    }
    }
  }
script>
?
style>
style>

template>
    div>
    div class="list-group">
      
            NoteItem
            v-for="(note,index) in noteList"
            v-bind:n=‘note‘
            v-bind:key=‘index‘
            v-on:plus=‘p‘>  
            NoteItem>
            p>计数器:{{count}}p>
        div>
     div>
template>
?
script>
  import NoteItem from ‘@/components/NoteItem‘
  export default {
    name:‘NoteList‘,
    components:{
       NoteItem
     },
     data:function() {
       return {
         noteList: [
           ‘第一项‘,‘第二项‘,‘第三项‘
         ],
         //count:0          //使用子组件向父组件传值时使用data，使用vuex时注释此项
       }
     },
     methods:{     //v-on监听事件使用method
       p(){
         //console.log(this.count);
         this.count+=1
     }
     },
     computed:{         //使用vuex时使用此项,要用return返回
       count:function() {
         return this.$store.state.count
       }
     }
?
}
script>
style>
style>

#允许跨域请求的IP（因为vue默认8080端口，Django默认8000端口）
#授权白名单
CORS_ORIGIN_WHITELIST=(
    ‘http://localhost:8080‘,
    ‘http://127.0.0.1:8080‘
)

from app01 import models
from django.http import JsonResponse
?
def note_list(request):
    ret = {"code": 0}
    data = list(models.Note.objects.all().values("id", "title", "content", "markedcontent"))
    ret["data"] = data
    return JsonResponse(ret) #返回json字符串

script>
  import ‘bootstrap/dist/css/bootstrap.min.css‘
  export default {
    name: ‘App‘,
    data: function () {
      return {}
    },
    // 计算属性
    computed: {
      // 当前Vue实例注册的所有路由
      allRouters() {
        return this.$router.options.routes
      }
    },
    beforeMount(){     //在挂载前执行store.js中的playNote函数接受后端数据
     this.$store.commit(‘playNote‘)
    },
  }
script>

import Vue from ‘vue‘
import Vuex from ‘vuex‘
import axios from ‘axios‘  //导入axios
Vue.use(Vuex)
?
export default new Vuex.Store({
    state: {
      count:0,
      notelist:[]
    },
    mutations:{
    
      addnote_store(state,data){   //捕获NoteEdit传到store的数据用data接收
        state.notelist.push(data)
      },
      playNote(state,data){
        //在挂载DOM之前向后端获取数据
        axios.get(‘http://127.0.0.1:8000/api/notes/‘)  //访问note_list视图函数的路由
               .then(function (response) {          //response接收包含json字符串(ret)在内的数据
                   //console.log(response.data.data);
                   state.notelist=response.data.data  //后端返回到response中的数据(ret)以data命名
        })
               .catch(function (error) {              //获取后端数据失败打印错误信息
                  console.log(error);
        });
      }
    },
    actions:{
        
    //方法一：直接将新添加的数据使用 addnote_store添加到 notelist:[]
      addnode_post(context,data){    //异步操作store
     // 发送 POST 请求
       var data=qs.stringify(data) //发送json类型
       axios({
         method: ‘post‘,
         url: ‘http://127.0.0.1:8000/api/add/‘,
         data: data,
         })
         .then(function (response) {
           console.log(‘插入数据‘);
             console.log(response);
             context.commit(‘addnote_store‘,response.data.data)  // {id: 3, title: "第三条笔记", content: "", markdownContent: ""}
              //此处只让后端在数据库中添加数据，不添加到notelist:[]
           })
         .catch(function (error) {
             console.log(error);
           })
           },
    }
    })

template>
        div class="list-group">
            NoteItem
            v-for="(note,index) in noteList"
            v-bind:n=‘note‘
            v-bind:key=‘index‘
            >
        div>
template>
?
script>
  import NoteItem from ‘@/components/NoteItem‘
  export default {
    name:‘NoteList‘,
    components:{
       NoteItem
     },
     data:function() {
       }
     },
     computed:{         //使用vuex时使用此项
       count:function() {
         return this.$store.state.count
       },
       noteList:function(){    //使用vuex获得store的数据
         return this.$store.state.notelist
       }
     }
}
script>

template>
  div
  class="list-group-item"
  v-on:click="foo"
  >
  {{n.title}}{{n.content}}
  div>
template>
?
script>
export default{
    name:‘NoteItem‘,
    props:{      //props指定接收父组件传递的数据
      n:Object
    },
    methods:{                 //v-on监听事件使用method
      foo(){                  //子组件被点击时向父组件传值 ，使用$emit()传递事件，告知父组件子组件被点击
       // this.$emit(‘plus‘)   //使用子组件向父组件传值时使用$emit，使用vuex时注释此项
       //this.$store.state.count+=1      //使用vuex,在被点击时修改store中的count
       this.$store.commit(‘increment‘)   //使用vuex,在被点击时提交事件increme
    }
    }
  }
script>