照例先放代码。

https://github.com/769484623/TodoList

还是照例的废话……
实习所在组的Leader让再学一下Vue，觉得只是看文献很难有深入理解，于是还是决定项目驱动。（好吧，我知道这一个月囫囵吞枣的学这么一堆不太好，但作为一个做了两年多嵌入式的人，需要知道与了解的东西实在太多……吐血）

运行图

这里写图片描述

Webpack

首先从Webpack开始说吧。
做前端基本是绕不开这个Webpack了。因为我先学的React，所以Vue 的 webpack配置对我倒是不太难。
因为我没使用vue-cli，所以在npm init之后，需要在目录下新建一个webpack.config.js。具体配置如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
    mode: "development",
    entry:{
        index:"./index.js"
    },
    output: {
        filename: "static/js/[name].js"
    },
    resolve: {
        extensions: [".js",".vue"],
        modules: ['node_modules'],
        alias: {
            vue: 'vue/dist/vue.js',
        }
    },
    devServer: {
        inline:true,
        port:3000
    },
    module: {
        strictExportPresence: true,
        rules: [
            {
                test:/\.vue$/,
                loader: "vue-loader",
            },
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude:/node_modules/
            },
            {
                test:/\.css$/,
                loader: "style-loader!css-loader"
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:"./index.html",
            inject:true,
            filename:"index.html",
        }),
        new VueLoaderPlugin(),
    ],
}

使用ES6，所以需要Babel；需要使用Vue与Vue单文件中的< style>，所以使用vue-loader跟style-loader!css-loader（百度得来）

CSS 开发心得

本次想自己做一个Modal，Modal里有一个form，两个text一个button。
Modal需要做的很简单，将颜色变为灰色，同时屏蔽用户对非Modal的访问。
我最开始打算直接用opacity这个属性来做，但发现，如果你将一个div opacity设置为0.5，那么他下面的元素最大的不透明度就是0.5。
我想要的效果是，对话框完全不透明，其他的地方被灰色遮罩遮蔽，同时能看出被遮盖的其他元素。
百度了一番，发现可以用以下方法来解决这问题：

#input-modal-overlay{
        text-align: center;
        z-index: 1000;
        position: absolute;
        left: 0;
        top: 0;
        width:100%;
        height:100%;
        background-color: rgba(0,0,0,0.5);
    }

将背景色的Alpha值设置一下[rgba(0,0,0,0.5)]即可实现遮蔽其他元素的作用，同时opacity维持不变，其子元素的opacity可设置成完全不透明，即为 1。
另外z-index: 1000;这个参数，顾名思义，就是设定元素的Z值，实现覆盖在其他所有元素之上这个功能。

Vue开发

想了想，好像没什么好说的额……（好吧，是因为偷懒没及时整理然后找不到要点了）
可能需要重点看一下的位置就是

data:function (){
            return {
                modalState:false,
                labelName:"",
                additionInfo:""
            }
        },

这里吧。跟一般的直接data:{xxx:xxx}不同，这里需要return 一个，具体为什么大家可以百度一下，篇幅有限，就不多说了。
另外一点就是父组件与子组件数据的传递，这个有点坑，虽然在这一点跟react很像，但还是很坑（Redux的确省事……讲真，我觉得React更开发者友好）

额……有问题大家看代码吧……刚学Vue没几天，写的很差，请各位见谅～

（下周转战php laravel……容我吐会血）

Vue2 + Mint UI + Webpack的简易Todo List

运行图

Webpack

CSS 开发心得

Vue开发

猜你喜欢