Vue&webpack入门实践

其他 2019-06-08 12:11:40 阅读次数: 0

目录

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 都可以启动项目。

猜你喜欢

转载自www.cnblogs.com/qianbixin/p/10990274.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022