黑胡子大叔的小屋

Vue练手项目

这里写目录标题

- - 小记
  - 笔记
  - - 一、项目初始化
    - - 1、初始化
      - 2、安装webpack
      - 3、引入并使用vue
    - Webpack的基本配置
    - - 基本配置文件
      - 配置loader
    - 写几个小栗子
    - - 栗子一
      - 栗子二
      - 栗子三
      - 栗子四
      - 栗子五
    - 练手实例

小记

这里有篇讲Vue的博客，挺不错的，参考：
https://blog.csdn.net/qq_44317018/article/details/104146747

笔记

一、项目初始化

1、初始化

首先使用vscode快捷键打开当前文件夹下的命令行

	Ctrl + `

运行

	npm init -y

生成package.json文件

在项目中需要用到webpack进行打包，下面安装webpack

2、安装webpack

执行

npm install webpack webpack-cli  -D
其中-D是  --save-dev的简写，表示开发环境依赖

3、引入并使用vue

首先对项目进行基本配置

	创建index.html、main.js等

配置Vue环境

npm install vue

配置完成后在node_modules文件夹下回多出一个vue文件夹，并且在package.json中会多出vue依赖

Webpack的基本配置

基本配置文件

//导入path模块
const path=require('path')
module.exports={
     
    //打包入口
    entry:'./src/main.js',
    //打包出口
    output:{
     
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    }
}

在package.json中添加脚本指令

现在打包执行下面的指令即可

npm run build

配置loader

vue-loader官方文档：https://vue-loader.vuejs.org/
loader的官方文档：https://www.webpackjs.com/loaders/

执行：

npm install -D vue-loader vue-template-compiler

注意：需要额外单独安装 css-loader

执行：

npm install -D css-loader
npm install style-loader --save-dev

配置webpack配置文件:

//导入path模块
const path=require('path')
const {
      Plugin } = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports={
     
    //打包入口
    entry:'./src/main.js',
    //打包出口
    output:{
     
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    },
    //打包规则
    module:{
     
        rules:[
            {
     
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    //插件配置
    plugins:[
        new VueLoaderPlugin()
    ]
}

报错：

 You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

解释：
Vue会打包生成三个文件：

runtime only文件 vue.common.js
compiler only的文件 compiler.js
runtime + compiler 的文件 vue.js

默认导出：vue.common.js

在webpack中添加别名的配置:

resolve:{
	alias:{
		'vue':'vue/dist/vue.js'
	}
}

写几个小栗子

栗子一

实现效果：

跑通，代码如下：

Test.vue:

<template>
  <div>
    <button id="btn_add" @click="add_num()">+button>
        <h2 id="num">{
    {num}}h2>
    <button id="btn_del" @click="del_num()">-button>
  div>
template>
<script>
export default {
      
    name:"test",
    data:function () {
      
      return{
      
        num:0
      }
    },
    methods:{
      
      add_num:function () {
      
          console.log(123);
          this.num++;
      },
      del_num:function () {
      
          this.num--;
      }
    }
}
script>

main.js:

import Vue from 'vue'
import test from './Test.vue'
const app=new Vue({
     
    el: '#app',
    components:{
     
        test
    },
    template:``
})

栗子二

实现效果：

代码如下：
Test2.vue:

<template>
    <div>
        <h1>用户名：{
    {name}}h1>
        <h2>性别：{
    {sex==1?"男" :"女"}}h2>
        <h3>下单时间:{
    {new Date().toLocaleDateString()}}h3>
        <h3>小计:¥{
    {(price*count).toFixed(2)}}h3>
        <input v-model="name" type="text">
        <input type="radio" id="male" value="1" v-model="sex" name="sex">男
        <input type="radio" id="male" value="0" v-model="sex" name="sex">女
        
    div>
template>
<script>
export default {
      
    name:"test2",
    data:function() {
      
        return{
      
            name:"张三",
            sex:"1",
            orderTime:"1579507293225",
            price:12.5,
            count:5
        }
    }
}
script>

这里讲过复选框等基础控件的v-modal的用法：
https://blog.csdn.net/lzl980111/article/details/104740163

栗子三

实现效果：

练习v-if
代码如下：
Test3.vue

<template>
    <div>
        <h2 v-if="isLogin">已登录h2>
        <a @click="login()">登录a>
        <a @click="exit()">注销a>
    div>
template>
<script>
export default {
      
    name:"test3",
    data:function(){
      
        return{
      
            isLogin:false
        }
    },
    methods:{
      
      login:function () {
      
          this.isLogin=true
      },
      exit:function () {
      
          this.isLogin=false
      }
    }
}
script>

这里使用v-show也是可以实现的，v-show是加入了display:none这个css样式，而v-if是直接删除dom，相比的话v-if效率会低一些

栗子四

观察者模式
实现效果：

代码如下：
Test4.vue:



<template>
    
    <div>
        <h1>Message:{
    {message_now}}h1>
        <input v-model="message_now" v-focus>
        <br>
        <button @click="addObv()">添加观察者button>
        <br>
        <button @click="publish_message()">发布button>
        <ul>
            <li v-for="(item,index) in observers" :key='index'>
                <h2>观察者姓名：{
    {item.name}}h2>
                <h3>观察者信息：{
    {item.message}}h3>
            li>
        ul>
    div>

template>
<script>
export default {
      
    name:"test4",
    data:function(){
      
        return {
      
            message_now:"123",
            observers:[
                {
      
                    name:"obv1",
                    message:"321",
                    getNewMessage:function(){
      
                        this.message=message_now
                    }
                }
            ],

        }
    },
    methods:{
      
        //定义addObv方法用来添加观察者
        addObv:function(){
      
            console.log("测试添加观察者");
            const obverser={
      
                name:"obv",
                message:this.message
            };
            this.observers.push(obverser);
            console.log("观察者添加完成");
        },
        //定义publish_message方法用来发布信息
        publish_message:function(){
      
            this.observers.forEach(observer=>{
      
                observer.item="obv",
                observer.message=this.message_now
            })
        },
    }
}
script>