从零开始搭建标准化Webpack管理的Vue项目

最新推荐文章于 2024-01-04 13:46:36 发布

蜗牛杨哥

最新推荐文章于 2024-01-04 13:46:36 发布

阅读量368

点赞数

本文链接：https://blog.csdn.net/u014635374/article/details/118891311

版权

less 标准教程: https://www.w3cschool.cn/less/less_installation.html

温馨提示: 整个搭建过程，需保证网络良好........普盲：

npm 包管理工具：

npm install：安装项目所需要的全部包，需要配置package.json文件。

npm uninstall：卸载指定名称的包。

npm install 包名：安装指定名称的包。

npm update：更新指定名称的包。

npm start：项目启动。

npm run build：项目构建。

由于npm命令在国内下载速度很慢，推荐为npm配置淘宝镜像，以加快下载速度。

淘宝镜像是淘宝网为开发者提供的镜像服务器，它会和npm官方的服务器保持同步。

配置镜像：
npm config set registry https://registry.npm.taobao.org

删除镜像配置：
npm config delete registry

(1)设置淘宝镜像: npm config set registry https://registry.npm.taobao.org

(2)安装webpack 与webpack-cli

执行命令: npm install i -D webpack@4.27.x webpack-cli

看到安装输出:

说明已经安装完成

执行命令: webpack -v 如下

(3) 初始化webpack管理的vue项目 myapp ,执行如下命令：

vue init webpack myapp

该命令执行完毕后，自动生成的标准化目录结构及输出如下信息:

安装以及完成，

目录结构如下：

生成的目录结构说明：

cd myapp

执行npm run dev 看到如下信息：

访问http://localhost:8080，如下

支持具有webpack的标准脚手架vue搭建完毕....

小实例：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue中部分指令的使用</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <p>元素v-for指令：</p>
    <div v-for="(item,key) in list" data-id="key">
        索引是: {{key}},元素内容是：{{item}}
    </div>
    <hr size="2"/>
    <div v-if="isShow" style="background-color:#ccc;">我是v-if</div>
    <button @click="isShow=!isShow">显示/隐藏</button>
    <hr/>
    <div id="student_table_content">
        <div class="student_operation">
            <button @click="add">添加学生</button>
            <button @click="del">删除学生</button>
        </div>
        <div class="student_content">
            <table border="1" width="50%" style="border-collapse: collapse">
                <tr>
                    <th>班级</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                </tr>
                <tr align="center" v-for="item in students">
                    <td>{{item.grade}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.gender}}</td>
                    <td>{{item.age}}</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="random_block_num">
        <button v-on:click="count+=Math.random(10000)">随机数</button>
        <p>自动生成的随机数是{{count}}</p>
        <p>提交表单： 查看控制台console</p>
        <p>
            <input type="text" v-on:keyup.enter="submit"/> <span>* enter进行表单提交|</span>
        </p>
    </div>
    <div class="button_prevent">
        <div v-on:click="doParent">
            <button v-on:click="doThis">事件冒泡</button>
            : <label v-html="preventClick"></label>
            <button v-on:click.stop="doThis">阻止事件冒泡</button>
            : <label v-html="preventClick"></label>
        </div>
    </div>
    <hr/>
    <div class="a_label_prevent">
        <a href="https://www.baidu.com" v-on:click.prevent>阻止默认行为</a>
        <a href="https://www.baidu.com">不阻止默认行为</a>
    </div>
    <div class="button_self_click">
        <div class="O_div_001" v-on:click.self="doParent_self">a
            <div class="O_div_002" v-on:click="doThis_self">b</div>
        </div>
        <div class="O_div_001" v-on:click="doParent_self">c
            <div class="O_div_002" v-on:click.self="doThis_self">d</div>
        </div>
    </div>
</div>

</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            list: [1, 2, 3],
            isShow: true,
            students: [],
            count: 0,
            preventClick: '',
        },
        methods: {
            // 添加学生信息
            add() {
                let student = {grade: '1', name: '张三', gender: '男', age: 25};
                this.students.push(student);// 往数组中添加数据
            },
            // 删除学生信息
            del() {
                this.students.pop()
            },
            submit() {
                console.info("表单提交成功");
            },
            doThis() {
                this.preventClick = "查看console控制台日志"
            },
            doParent() {
                this.preventClick = "我是父元素单击事件"
                console.log("子组件的单击事件触发了父组件的单击事件：" + this.preventClick)
            },
            doParent_self() {
                console.log('我是父元素的单击事件')
            },
            doThis_self() {
                console.log('我是当前元素的单击事件')
            }

        }
    })
</script>
</body>
<style scoped>
    body {
        text-align: center;
        font-family: "宋体";
        font-size: 16px;
        line-height: 20px;
    }

    #app {
        background-color: #9ea7b4;
    }

    .student_content table {
        /*居中*/
        margin-top: 20px;
        margin-right: auto;
        margin-left: auto;
    }

    .random_block_num {
        margin-top: 20px;
    }

    .a_label_prevent {
        display: block;
    }

    .O_div_001 {
        width: 80px;
        height: 80px;
        background: #aaa;
        margin-left: auto;
        margin-right: auto;
    }

    .O_div_002 {
        width: 50px;
        height: 50px;
        margin-left: auto;
        margin-right: auto;
        background: #ccc;
    }

    .button_self_click {
        margin-top: 20px;
    }
</style>
</html>

效果图如下：