Vue&webpack入门实践

目录

  • 1. 下载安装Vue
  • 2. Vue
    • 2.1 Vue要素
    • 2.2 指令
    • 2.3 组件化
    • 2.4 vue-router
  • 3. webpack
    • 3.1 webpack简介
    • 3.2 四个核心概念
    • 3.3 安装
    • 3.4 配置
    • 3.5 执行打包并测试运行
    • 3.6 打包CSS
    • 3.7 快速执行打包命令
    • 3.8 打包html
    • 3.9 热更新
  • 4. Vue-cli
    • 4.1 安装
    • 4.2 文件结构分析

1. 下载安装Vue

  1. 先安装好Node.js，因为接下来要使用其中的NPM安装Vue。
  2. 建议使用Vscode作为编辑器：创建一个文件夹，用Vscode打开。
  3. 打开Vscode的命令行窗口，输入命令npm init -y对文件夹进行初始化，完成后多了个package.json文件。
  4. 输入命令npm install vue --save命令安装Vue。

安装完后多了一个文件夹node_modules和package-lock.json，node_modules是NPM安装的模块的默认存放位置，打开发现其中有个Vue文件夹。

2. Vue

2.1 Vue要素

先看一个例子

<!DOCTYPE html>
<html>
<head>
    <!-- 注意路径-->
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        数量为：<input type="text" v-model="num"><br>
        <button v-on:click="increase">点我+1</button>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                num: 1
            },
            methods: {
                increase: function() {
                    this.num++;
                }
            }
        })
    </script>
</body>
</html>

效果: 设置文本框中的数字，点击+1后在原来的基础上增加1。

2.1.1 创建Vue实例

创建方式如下，

el表示要关联的HTML模版的id，

data表示模版中数据的初始值，

methods定义了模板中出现的函数。

var app = new Vue({
     el: "#app",
     data: {num: 1},
     methods: {
         increase: function() {
             this.num++;
         }
     }
})

注意：这段代码必须写在html模版下面，否则不生效。

2.1.2 Html模版

要渲染的html模版，其id为app对应于Vue构造函数中el的值#app。

Vue只能渲染这个div内部的变量，方法等元素。

<div id="app">
        数量为：<input type="text" v-model="num"><br>
        <button v-on:click="increase">点我+1</button>
</div>

2.1.3 数据和视图

这是Vue的特性：双向绑定。

上面的例子中，点击+1按钮，触发increase方法，Vue实例中的num+1，文本框中显示的数字+1；

改变文本框中的数字，再点+1按钮，数字就会在原来基础上+1，说明修改显示内容也能修改对应的Vue实例中的变量。

这就是视图和数据的双向绑定，修改视图，数据就变；修改数据，视图也变。

2.1.4 方法

按钮通过v-on:click指令绑定了increase方法，方法的定义在Vue对象的methods属性里面。

html

<button v-on:click="increase">点我+1</button>

js

var app = new Vue({
     ...
     methods: {
         increase: function() {
             this.num++;
         }
     }
})

2.1.5 生命周期

每个Vue实例在被创建时都要经过一系列的初始化过程，比如创建实例，装载模板等等。Vue为生命周期的每个状态都设置了监听函数。此处应该有个图片，但这个图片太长了，给个地址自己看去吧

图片地址

使用方式如下

var vm = new Vue({
    el:"#app",
    data:{...},
    //监听函数
    created(){
        ...
    }
})

2.2 指令

2.2.1 插值表达式

像jsp中的EL表达式一样，显示变量或者一个表达式的结果，有{{}}、v-text、v-html三种指令

v-html指令输出html文本后会自动渲染。

代码

<div id="test1">
        “花括号表达式的值：”{{1+1}}<br>
        “v-text”标签输出表达式的值：<span v-text="1+1"></span> <br>
        “v-html”标签输出表达式的值：<span v-html="1+1"></span> <br>
        “花括号输出文本内容：”{{hello}}<br>
        “v-text”标签输出普通文本：<span v-text="hello"></span> <br>
        “v-html”标签渲染html文本：<span v-html="hello"></span>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#test1",
            data: {
                hello: "<h1>大家好，我是小明</h1>"
            }
        })
    </script>

结果

2.2.2 v-model

插值表达式只能通过改变变量来改变显示的内容，而v-model指令可以让数据和视图相互影响。

由于视图可操作，因此限制了对应的html标签的种类。v-model指令支持的标签有

  • input
  • select
  • textarea
  • checkbox
  • radio
  • components（Vue中的自定义组件）

代码

    <div id="test2">
        <input type="checkbox" v-model="language" value="Java" />Java<br />
        <input type="checkbox" v-model="language" value="PHP" />PHP<br />
        <input type="checkbox" v-model="language" value="Swift" />Swift<br />
        <h1>
            你选择了：{{language.join(',')}}
        </h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#test2",
            data: {
                language: []
            }
        })
    </script>

结果

选择复选框后显示的内容会对应变化；后台修改数据，显示的选择项也会变化。

2.2.3 v-on

为元素绑定事件。比如绑定点击事件的语法是v-on:click，可以简写为@click。

<!-- 给页面元素绑定事件 -->
    <div id="test3">
        <!--事件中直接写js片段-->
        <button v-on:click="num++">增加</button><br />
        <!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
        <button v-on:click="decrement">减少</button><br />
        <!-- 简写方式 -->
        <button @click="decrement">减少</button><br />
        <!--键盘事件-->
        <button @keyup.enter="num++">先使我获得焦点，然后按下enter键增加</button><br />
        <h1>num: {{num}}</h1>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: "#test3",
            data: {
                num: 1
            },
            methods: {
                decrement() {
                    this.num--;
                }
            }
        })
    </script>

2.2.4 v-for

用于循环遍历数据

遍历数组

<!-- 遍历数组 -->
    <div id="test4">
        <ul>
            <li v-for="(user,index) in users">
                {{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#test4",
            data: {
                users: [{
                        name: '小红',
                        gender: '女',
                        age: 11
                    },
                    {
                        name: '小明',
                        gender: '男',
                        age: 10
                    }
                ]
            }
        })
    </script>

遍历对象

    <div id="test5">
        <ul>
            <li v-for="(value,key,index) in user">
                {{index}} - {{key}} : {{value}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#test5",
            data: {
                user: {
                    name: '小明',
                    gender: '男',
                    age: 10
                }
            }
        })
    </script>

2.2.5 v-if和v-show

v-if用于条件判断

    <div id="test6">
        <!--事件中直接写js片段-->
        <button v-on:click="show = !show">点击切换</button><br />
        <h1 v-if="show">
            你好
        </h1>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#test6",
            data: {
                show: true
            }
        })
    </script>

点击按钮，文本内容会隐藏。

v-if也可以和v-for结合使用

<div id="test7">
        <ul>
            <li v-for="(user,index) in users" v-if="user.gender === '女'">
                {{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#test7",
            data: {
                users: [{
                        name: '小红',
                        gender: '女',
                        age: 10
                    },
                    {
                        name: '小明',
                        gender: '男',
                        age: 10
                    }
                ]
            }
        })
    </script>

结果只显示一个小红

有if当然也有else和elseif

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-show控制元素的显示，如果元素隐藏了，并不是从dom中移除，而是设置display为none

<div id="test6">
        <!--事件中直接写js片段-->
        <button v-on:click="show = !show">点击切换</button><br />
        <h1 v-show="show">
            你好
        </h1>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#test6",
            data: {
                show: true
            }
        })
</script>

2.2.6 v-bind

假如我们想改变class属性，这样写是错误的

<div class="{{isAcctive}}"></div>

因为插值表达式不能用于属性的值中。

我们可以借助v-bind:class指令,可以简写为:class

    <div id="test8">
        <div :class="isActive">注意class的值</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#test8",
            data: {
                isActive: ['active', 'hasError']
            }
        })
    </script>

结果

2.2.7 计算属性

在插值表达式中写一长串代码很难看，可以用“计算属性”来替代，这个属性实际上是个方法，将方法名以变量形式绑定到插值表达式中了：

    <div id="test9">
        <h1>您的生日是：{{birth}} </h1>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#test9",
            data: {
                birthday: 1429032123201 // 毫秒值
            },
            computed: {
                birth() { // 计算属性本质是一个方法，但是必须返回结果
                    const d = new Date(this.birthday);
                    return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
                }
            }
        })
    </script>

结果

2.2.8 watch

假如我们要监控用户输入了什么内容，可以用监控属性来实现

    <!-- 监控属性变化 -->
    <div id="test10">
        <input type="text" v-model="message">
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#test10",
            data: {
                message: ""
            },
            watch: {
                message(newVal, oldVal) {
                    console.log(newVal, oldVal);
                }
            }
        })
    </script>

结果

在文本框输入good，控制台记录了每个按键按下的动作


2.3 组件化

一个页面中总有相同的部分可以抽取出来做为组件使用，Vue提供了定义组件的方法。

2.3.1 全局组件

代码

    <div id="test1">
        <counter></counter>
    </div>

    <script type="text/javascript">
        // 定义全局组件，参数1，组件名称；参数2，组件参数。
        // 用html模板替换掉了counter标签，注意数据传递的方式，是data()而不是data
        Vue.component("counter", {
            template: '<button v-on:click="count++">你点了我 {{ count }} 次</button>',
            data() {
                return {
                    count: 0
                }
            }
        })

        var app = new Vue({
            el: "#test1"
        });
    </script>

页面表现


  • 组件也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
  • 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
  • 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
  • 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
  • data的定义方式比较特殊，必须是一个函数。

定义全局组件后，可以在其他地方使用。

值得注意的一点：使用者必须也是一个Vue实例。

    <div id="test2">
        <counter></counter>
        <counter></counter>
        <counter></counter>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: "#test2"
        });
    </script>

现象

可以看出：每个组件都维护自己的一份变量。

2.3.2 局部组件

就像定义变量一样定义了一个局部组件localCounter，将其注册到我们自定义的<test-component></test-component>标签中。

注意：此处用了驼峰命名法来对应标签：testComponent对应于test-component

    <div id="test3">
        <test-component></test-component>
    </div>

    <script type="text/javascript">
        const localCounter = {
            template:
                '<button v-on:click="count++">我是局部组件：你点了我 {{ count }} 次</button>',
            data() {
                return {
                    count: 0
                }
            }
        };
        var app = new Vue({
            el: "#test3",
            components: {
                testComponent: localCounter
            }
        });
    </script>

2.3.3 组件通信

2.3.3.1 父向子通信

下面的例子展示了：父组件得到lessons的数据后传递到子组件中，以子组件的模板显示

    <div id="test4">
        <parent :items="lessons" />
    </div>
    <script type="text/javascript">
        //子组件，通过props来接收父组件传过来的数据
        //这个子组件是一个局部组件
        const son = {
            template:
            '<ul>                <li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>            </ul>',
            props: {
                items: {
                    type: Array,
                    default: []
                }
            }
        }

        var app = new Vue({
            el: "#test4",
            components: {
                parent: son
            },
            data: {
                lessons: [
                    {id: 1,name: 'java'},
                    {id: 2,name: 'php'},
                    {id: 3,name: 'ios'},
                ]
            }
        })
    </script>

现象

2.3.3.2 子向父通信

代码

<div id="test5">
        <h2>num: {{num}}</h2>
        <my-component @inc="increment" @dec="decrement"></my-component>
    </div>

    <script type="text/javascript">
        Vue.component("myComponent", {
            template: '                <div>                    <button @click="plus">加</button>                      <button @click="reduce">减</button>                  </div>',
            methods: {
                plus() {
                    this.$emit("inc");
                },
                reduce() {
                    this.$emit("dec");
                }
            }
        })
        var app = new Vue({
            el: "#test5",
            data: {
                num: 0
            },
            methods: {
                increment() {
                    this.num++;
                },
                decrement() {
                    this.num--;
                }
            }
        });
    </script>

现象

点击加按钮，数值增加；点击减按钮，数量减少。

解释

父组件是

<my-component @inc="increment" @dec="decrement"></my-component>

子组件是

Vue.component("myComponent", {
            template: '                <div>                    <button @click="plus">加</button>                      <button @click="reduce">减</button>                  </div>',
            methods: {
                plus() {
                    this.$emit("inc");
                },
                reduce() {
                    this.$emit("dec");
                }
            }
})

想要通过子组件中的加和减按钮实现num的加和减，就要调用父组件的函数。

$emit()方法是Vue提供的用于调取父组件绑定函数的函数。

最后流程就是：点击加按钮，调用子组件的plus方法，plus方法调取父组件的increment方法实现num的增加操作。

2.4 vue-router

2.4.1 安装vue-router

安装命令npm install vue-router --save

引入依赖

<script src="../node_modules/vue-router/dist/vue-router.js"></script>

2.4.2 实现功能

利用vue-router实现登录注册菜单的切换：

点击登录后显示登录页

点击注册后显示注册页

将登录、注册和路由分成三个组件，由index.html引入并使用。目录结构如下

login.js

const loginForm = {
    template:'    <div>    <h2>登录页</h2>     用户名：<input type="text"><br/>    密码：<input type="password"><br/>    </div>    '
}

register.js

const registerForm = {
    template:'    <div>    <h2>注册页</h2>     用户名：<input type="text"><br/>    密码：<input type="password"><br/>    确认密码：<input type="password"><br/>    </div>    '
}

router.js

// 根据路径渲染对应的组件
const indexRouter = new VueRouter({
    routes:[
        {
            path:"/login",
            component: loginForm
        },
        {
            path: "/register",
            component: registerForm
        }
    ]
})

index.html

<!DOCTYPE html>
<html>
<head>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <!-- 跳转链接，点击后将地址传送给router  -->
        <span><router-link to="/login">登录</router-link></span>
        <span><router-link to="/register">注册</router-link></span>
        <hr/>
        <div>
             <!-- 路由锚点，点击跳转链接后router会在此渲染对应组件的html模板-->
            <router-view></router-view>
        </div>
    </div>
    <script src="js/login.js"></script>
    <script src="js/register.js"></script>
    <script src="js/router.js"></script>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            router: indexRouter  //使用路由
        })
    </script>
</body>
</html>

3. webpack

3.1 webpack简介

Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源打包成一个整体，压缩混淆提高性能和安全性，将高级语法转义，提高兼容性。

3.2 四个核心概念

  • 入口(entry)

    webpack打包的启点，可以有一个或多个，一般是js文件。webpack会从启点文件开始，寻找启点直接或间接依赖的其它所有的依赖，包括JS、CSS、图片资源等，作为将来打包的原始数据。

  • 输出(output)

    出口一般包含两个属性：path和filename。用来告诉webpack打包的目标文件夹，以及文件的名称。目的地也可以有多个。

  • 加载器（loader）

    webpack本身只识别Js文件，如果要加载非JS文件，必须指定一些额外的加载器（loader），例如css-loader。然后将这些文件转为webpack能处理的有效模块，最后利用webpack的打包能力去处理。

  • 插件(plugins)

    插件可以扩展webpack的功能，让webpack不仅仅是完成打包，甚至各种更复杂的功能，或者是对打包功能进行优化、压缩，提高效率。

3.3 安装

执行命令npm install webpack webpack-cli --save-dev

在package.json里多了几行配置，分别是运行时依赖和开发依赖

3.4 配置

先在package.json同级的目录下新建webpack.config.js文件。

接下来以vue-router的demo为例演示webpack的用法。

3.4.1 配置入口

入口一般是一个或多个js文件，通过这些js文件找出相关的所有依赖树，最后打包输出。

在vue-router的demo里面，index.html引用了相关的js，但它是html文件，不适合作为启点。

因此我们需要一个额外的main.js引入其他所有的js。

main.js

//ES6语法导入js模块，注意：不带.js后缀
import Vue from '../node_modules/vue/dist/vue'
import VueRouter from '../node_modules/vue-router/dist/vue-router'
import loginForm from './js/login'
import registerForm from './js/register'

//VueRouter使用模块加载，必须加上这一句
Vue.use(VueRouter)

const indexRouter = new VueRouter({
    routes:[
        {
            path:"/login",
            component: loginForm
        },
        {
            path: "/register",
            component: registerForm
        }
    ]
})

var vm = new Vue({
    el: "#app",
    router: indexRouter
})

loginForm和registerForm都是做为js模块导入的，他们自己也要分别追加导出语句。

在login.js中追加一句

export default loginForm;

在register.js中追加一句

export default registerForm;

最后配置入口：在webpack.config.js中指定入口文件

module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
}

3.4.2 配置出口

在webpack.config.js中指定出口路径和最终输出的文件名,最终的js如下

module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
    output:{
        // path: 输出的目录，__dirname是相对于webpack.config.js配置文件的绝对路径
        path : __dirname+'/dist',
        filename:'build.js'  //输出的js文件名
    }
}

3.5 执行打包并测试运行

执行命令npx webpack --config webpack.config.js

去掉index.html中的js引用标签，只引用打包好的build.js

<script src="../dist/build.js"></script>

测试运行，结果与打包之前一样。

3.6 打包CSS

webpack的四个核心概念，我们目前只使用了两个：入口和出口。

接下来使用加载器，加载非js资源，比如CSS。

3.6.1 安装加载器

执行命令：npm install style-loader css-loader --save-dev

3.6.2 编写css

新建一个和js目录同级的css文件夹，里面新建main.css

#app a{
    display: inline-block;
    width: 150px;
    line-height: 30px;
    background-color: dodgerblue;
    color: white;
    font-size: 16px;
    text-decoration: none;
}
#app a:hover{
    background-color: whitesmoke;
    color: dodgerblue;
}
#app div{
    width: 300px;
    height: 150px;
}
#app{
    width: 400px;
    border: 1px solid dodgerblue;
}

3.6.3 引入css模块

在main.js中添加import语句

import './css/main.css'

3.6.4 配置加载器

在webpack.config.js里配置，最终如下所示

module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
    output:{
        // path: 输出的目录，__dirname是相对于webpack.config.js配置文件的绝对路径
        path : __dirname+'/dist',
        filename:'build.js'  //输出的js文件名
    },
    module: {
        rules: [
            {
                test: /\.css$/, // 通过正则表达式匹配所有以.css后缀的文件
                use: [ // 要使用的加载器，这两个顺序一定不要乱
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

3.6.5 重新打包并运行

依然是执行npx webpack --config webpack.config.js

最终的CSS效果能够展示出来（不贴图片了）。

注意：所有的js、css最终都被放到了build.js里面。

3.7 快速执行打包命令

package.json里面可以配置脚本，在scripts标签里面添加"build": "webpack"

{
  "name": "vue-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.10",
    "vue-router": "^3.0.6"
  },
  "devDependencies": {
    "css-loader": "^2.1.1",
    "style-loader": "^0.23.1",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.3"
  }
}

这样就可以执行npm run build命令进行打包，代替原先的npx webpack --config webpack.config.js命令。

3.8 打包html

之前都是将js、css等相关文件打包好，最后手动引入到index.html中。

而webpack的html打包插件，可以把html和js、css等一起打包直接生成可用的页面。

3.8.1 安装并配置插件

执行npm install --save-dev html-webpack-plugin命令安装

配置webpack.config.js，最终如下

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
    output:{
        // path: 输出的目录，__dirname是相对于webpack.config.js配置文件的绝对路径
        path : __dirname+'/dist',
        filename:'build.js'  //输出的js文件名
    },
    module: {
        rules: [
            {
                test: /\.css$/, // 通过正则表达式匹配所有以.css后缀的文件
                use: [ // 要使用的加载器，这两个顺序一定不要乱
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: '首页',  //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html', // dist目录下生成的文件名
            template: './src/index.html' // 我们原来的index.html，作为模板
        })
    ]
}

3.8.2 打包查看效果

去掉原先index.html里面的引用build.js的标签

执行打包命令npm run build

发现dist文件夹下多了个index.html，运行发现效果与之前一致。

3.9 热更新

每次修改js或css都要重新打包，麻烦，webpack提供了一个热更新插件，这个插件搞了一个服务器，

我们修改代码后，可以自动检测修改并更新。

安装命令是：npm install webpack-dev-server --save-dev

之后在package.json中的scripts标签下添加

"dev": "webpack-dev-server --inline --hot --open --port 8081 --host 127.0.0.1"

注意端口号。

执行命令npm run dev，注意：是dev，不是build。

4. Vue-cli

使用webpack打包vue项目时需要我们手动安装插件、配置等，很麻烦。Vue提供了一个脚手架，Vue-cli，能够快速搭建一个web项目模板。

4.1 安装

执行命令npm install -g vue-cli

初始化webpackvue init webpack，接下来这样选择

4.2 文件结构分析

  • src/main.js

项目的入口文件

  • src/App.vue

文件内容如下

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

*.vue文件叫做单文件组件，每一个.vue文件都是一个独立的vue组件。

里面包含三部分内容

  • template：模板，支持html语法高亮和提示
  • script：js脚本，这里编写的就是vue的组件对象，看到上面的data(){}了吧
  • style：样式，支持CSS语法高亮和提示

每个组件都有自己独立的html、JS、CSS，互不干扰，真正做到可独立复用。

  • package.json
{
  "name": "vue-cli-test",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}
  • 可以看到这引入了非常多的依赖，绝大多数都是开发期依赖，比如大量的加载器。
  • 运行时依赖只有vue和vue-router
  • 脚本有三个：
    • dev：使用了webpack-dev-server命令，开发时热部署使用
    • start：使用了npm run dev命令，与上面的dev效果完全一样
    • build：等同于webpack的打包功能，会打包到dist目录下。

执行npm run dev或者 npm start 都可以启动项目。

原文地址：https://www.cnblogs.com/qianbixin/p/10990274.html

时间： 2024-11-06 18:43:07

Vue&webpack入门实践的相关文章

vue+webpack入门讲解

前言 用vue和webpack实现应该Todo项目,同时对构建过程进行一下小结.参考文档见文末的 Reference. 一.关于包和npm 1 npm 简单来讲,就是 函数--模块脚本--包--库的组成关系,我们开发时,需要引入其他人的第3方包,自己在html文档里一个一个引入太麻烦,所以需要一个集合了很多第3方功能的管理工具,即npm.此外,npm 是依附于 node.js 的. 2 package.json文件 它的作用是: 作为一个描述文件,描述了你的项目依赖哪些包 允许我们使用 "语义化

vue+webpack项目结构介绍

对vue已经有了一定的了解,所以希望可以在github上找到一些项目实践,但是无奈不知道vue的整体架构是如何的,往往不知道该如何着手看,所以这里在网上找了相关的文章作为参考,对结构有一个大致的了解.参考文章如下: 用vue+webpack搭建的前端项目结构 vue+webpack项目实践 这里插一句话,搜索谷歌做的确实好,支持原创,搜索精准,不知道比度娘高到哪里去~

vue+webpack在“双十一”导购产品的技术实践

双十一中,无线前端的产品可以说非常的丰富.在双十一中,互动始终是重头的一部分,但是与以往不一样的地方是,导购产品在本次双十一中有着不俗的表现.而今年的双11导购业务占据了5大模块里的后三个,除了必抢,其它业务均是由手淘的同学来完成的,笔者作为导购产品的一员,选择导购产品来给大家解读其中的技术实践. 本次双十一的导购产品都有哪些? 看到这些截图,相信很多人都很熟悉,不管是双十一晚会摇一摇摇出的“清单”,还是大家抢完红包迫不及待点开的“我的双十一”,又或者是点开“我的双十一”标签进入的人群会场寻找与

Vue.js 入门指南之“前传”（含sublime text 3 配置）

题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴级别”的前端开发人员,大牛请绕过. 1,下载安装Node.js 去 Node.js 官网下载一个Windows环节的安装包 node-v6.2.0-x64.rar 文件,一路安装下去即可.官网访问很慢,可以试试中文网 http://nodejs.cn/ 2,配置Vue环境 一开始看<基于Webpac

Vue.js 入门指南之“前传”

题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴级别”的前端开发人员,大牛请绕过. 1,下载安装Node.js 去 Node.js 官网下载一个Windows环节的安装包 node-v6.2.0-x64.rar 文件,一路安装下去即可.官网访问很慢,可以试试中文网 http://nodejs.cn/ 2,配置Vue环境 一开始看<基于Webpac

Vue.js最佳实践

Vue.js最佳实践 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList() }, watch: { searchInputValue(){ this.fetchPostList() } } 组件创建的时候我们获取一次列表,同时监听input框,每当发生变化的时候重新获取一次筛选后的列表这个场景很常见,有没有办法优化一下呢? 招式解析: 首先,在watchers中,可以直接使用函数的字面量名称:其次,声明immediate:true表示创建

Vue.js最佳实践(五招助你成为vuejs大师)

转自https://www.jb51.net/article/139448.htm 本文面向对象是有一定Vue.js编程经验的开发者.如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写. 对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站.但如果你想更加高效地使用Vue来开发,成为Vue.js大师,那下面我要传授的这五招你一定得认真学习一下了. 第一招:化繁为简的Watchers 场景还原: ? 1 2 3 4 5 6 7 8 created()

webpack 入门 - (三)

基于 webpack 入门 - (二) 实现交互式的工具 ,,即 一问一答 1.寻找合适的询问插件 let inquirer = require('inquirer') 2.index.js代码实现如下: #!/usr/bin/env node //需求 命令行 mycli create -t vue -n shop 创造vue模板的项目,项目名称为shop let createProject = require('./createProject') let path = require('pa

Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信

Vue2.0与 [百度地图] 结合使用: 1.vue init webpack-simple vue-baidu-map 2.下载axios cnpm install axios; 3.在main.js中引入axios,并使用 import axios from 'axios' /* 把axios对象挂到Vue实例上面,其他组件在使用axios的时候直接 this.$http就可以了 */ Vue.prototype.$http = axios; 4.引入百度地图的js秘钥--->最好在inde