Vue.js ~ 渐进式 JavaScript 框架。

lyfGeek

已于 2023-02-12 22:44:36 修改

阅读量401

点赞数 1

分类专栏：前端。文章标签： Vue.js

于 2020-07-14 18:39:56 首次发布

本文链接：https://blog.csdn.net/lyfGeek/article/details/107338530

版权

前端。专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue.js ~ 渐进式 JavaScript 框架。

what。

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

前端三大框架。

Angular
React
Vue

axios 前端通讯框架。

UI 框架。

Ant-Design
ElementUI、iview、ice（基于 Vue）。
BootStrap
AmazeUI。妹子 UI。

JavaScript 框架。

jQuery
Angular
React
Vue
Axios

JavaScript 构建工具。

Babel。Js 编译工具。
WebPack。模块打包器。

三端统一。

混合开发（Hybrid App）。

主要目的是实现一套代码三端统一（PC、Android：.apk 、iOS：.ipa ）并能够淵用到设备底层硬件（如：传感器、GPS、摄像头等），打包方式主要有以下两种

云打包：HBuild -> HBuildX，DCloud 出品；API Cloud。
本地打包：Cordova（前身是 PhoneGap）。

微信小程序。

后端技术。

Express：Node.js 框架。
Koa：Express 简化版。
npm：项目综合管理工具，类似 Maven。
yarn：npm 的替代方案，类似于 Maven 和 Gradle 的关系。

vue-element-admin。

前端 MV* 模式。

MVC。

同步通信为主。Model + View + Controller。

MVP。

异步通信为主。Model + View + Presenter。

MVVM。

异步通信为主。Model + View + ViewModel。

Hello World。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="app">
    {{message}}
</div>

<!-- 导入 Vue.js。-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!--或者：-->

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello, Vue!'
        }
    });
</script>


</body>
</html>

MVVM。

View Model。

在这里插入图片描述
双向绑定，避免频繁操作 Dom。

双向绑定，实时监听 data 变化。

在这里插入图片描述
我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

v-bind。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--或者：-->

    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->

</head>
<body>

<div id="app">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的信息。
    </span>
</div>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            message: '页面加载于：' + new Date().toLocaleString()
        }
    });
</script>

</body>
</html>

这里我们遇到了一点新东西。你看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。

如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = ‘新消息’，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。

v-if。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--或者：-->

    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->

</head>
<body>

<div id="app">
    <h1 v-if="ok">yes</h1>
    <h1 v-else>no</h1>
</div>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            ok: true
        }
    });
</script>

</body>
</html>

v-for。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--或者：-->

    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->

</head>
<body>

<div id="app">
    <li v-for="item, index in items">
        {{item.message}} -- {{index}}
    </li>
</div>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            items: [
                {message: 'Java'},
                {message: '前端'}
            ]
        }
    });
</script>

</body>
</html>

绑定事件 ~ v-on。

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--或者：-->

    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->

</head>
<body>

<div id="app">
    <button v-on:click="sayHi">click me</button>
</div>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            message: 'Geek'
        },
        methods: {// 方法必须定义在 Vue 的 method 对象中。
            sayHi: function () {
                alert(this.message);
            }
        }
    });
</script>

</body>
</html>

双向绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--或者：-->

    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->

</head>
<body>

<div id="app">
    输入的文本：<input type="text" v-model="message"><hr>

<br>{{message}}
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 123
        }
    })
</script>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--或者：-->

    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->

</head>
<body>

<div id="app">
    性别：
    <input type="radio" name="sex" value="男" v-model="geek">男
    <input type="radio" name="sex" value="女" v-model="geek">女

    <p>
        选中了谁：{{geek}}
    </p>
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            geek: ''
        }
    })
</script>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--或者：-->

    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->

</head>
<body>

<div id="app">
    下拉框：
    <select v-model="selected">
        <option value="" disabled>--请选择--</option><!-- iOS 系统第一项不能为空，否则此 select 将失效。-->
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>

    <span>value: {{selected}}</span>
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            selected: ''
        }
    })
</script>


</body>
</html>

Vue 组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--或者：-->

    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->

</head>
<body>

<div id="app">

    <geek v-for="item in items" v-bind:lyf="item"></geek>

</div>

<script>

    Vue.component('geek', {
        props: ['lyf'],
        template: '<li>{{lyf}}</li>'
    });

    var vm = new Vue({
        el: '#app',
        data: {
            items: ['Java', 'Linux', 'Python']
        }
    });
</script>


</body>
</html>

axios ~ 易用、简洁且高效的 http 库。

http://www.axios-js.com/zh-cn/docs/

特性

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

由于 Vue.js 是一个视图层框架，并且作者（尤雨溪）严格遵守 SoC（关注度分离原则），所以 Vue.js 并不包含 AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource 的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架。少用 jQuery，因为 ta 操作 Dom 太频繁。

{
  "name": "Geek 说 Java",
  "url": "https://github.com/lyfGeek/lyfGeek.github.io.git",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "东木头市",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "github.io",
      "url": "https://github.com/lyfGeek/lyfGeek.github.io.git"
    },
    {
      "name": "csdn",
      "url": "https://me.csdn.net/lyfGeek"
    },
    {
      "name": "github",
      "url": "https://github.com/lyfGeek"
    }
  ]
}

Vue 生命周期。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


</head>
<body>

<div id="app">
    <div>{{info.name}}</div>
    <div>{{info.address.street}}</div>

    <a v-bind:href="info.url">点我</a>
</div>


<script>
    var vue = new Vue({
        el: '#app',

        data() {
            return {
                // 请求的返回参数必须和 json 字符串一样。
                info: {
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    url: null
                }
            }
        },

        mounted() {// 钩子函数。ES 6 新特性。
            // axios.get('../data.json').then(response => (console.log(response.data)));
            axios.get('../data.json').then(response => (this.info = response.data));
        }
    });
</script>


</body>
</html>

计算属性。

计算出来的结果，保存在属性中，内存中运行。想象为缓存。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="../vue.min.js"></script>

</head>
<body>

<div id="app">
    <p>{{currentTime1()}}</p>
    <p>{{currentTime2}}</p>
</div>


<script>
    let vue = new Vue({
        el: '#app',
        data: {
            message: 'hello, geek'
        },
        methods: {
            currentTime1: function () {
                return Date.now();
            }
        },
        computed: {
            currentTime2: function () {
                return Date.now();
            }
        }
    });
</script>

</body>
</html>

vue.currentTime1()
1594961407862
vue.currentTime2()
VM85:1 Uncaught TypeError: vue.currentTime2 is not a function
    at <anonymous>:1:5
(anonymous) @ VM85:1
vue.currentTime2
1594961370555
vue.currentTime2
1594961370555
vue.currentTime2
1594961370555
vue.currentTime1()
1594961420793
vue.currentTime1()
1594961421555

slot。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="../vue.min.js"></script>

</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>
</div>


<script>

    // slot 插槽。
    Vue.component('todo', {
        template: '<div>\n' +
            '    <slot name="todo-title"></slot>\n' +
            '    <ul>\n' +
            '        <slot name="todo-items"></slot>\n' +
            '    </ul>\n' +
            '</div>'
    });

    Vue.component('todo-title', {
        props: ['title'],
        template: '<div>{{title}}</div>'
    });

    Vue.component('todo-items', {
        props: ['item'],
        template: '<li>{{item}}</li>'
    });

    let vue = new Vue({
        el: '#app',
        data: {
            title: 'Geek 列表',
            todoItems: ['Geek', 'Java', 'Python']
        }
    });
</script>

</body>
</html>

自定义事件内容分发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="../vue.min.js"></script>

</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <!--<todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>-->
        <todo-items slot="todo-items" v-for="(item, index) in todoItems" :item="item" v-bind:index="index"
                    v-on:remove="removeItem(index)" :key="index"></todo-items>
    </todo>
</div>


<script>

    // slot 插槽。
    Vue.component('todo', {
        template: '<div>\n' +
            '    <slot name="todo-title"></slot>\n' +
            '    <ul>\n' +
            '        <slot name="todo-items"></slot>\n' +
            '    </ul>\n' +
            '</div>'
    });

    Vue.component('todo-title', {
        props: ['title'],
        template: '<div>{{title}}</div>'
    });

    Vue.component('todo-items', {
        props: ['item', 'index'],
        // 只能绑定当前组件在方法。
        template: '<li>{{index}} ~ ~ ~ {{item}} <button @click="remove">删除</button></li>',
        methods: {
            remove: function (index) {
                // alert(111);
                // 通过组件删除。
                this.$emit('remove', index);
            }
        }
    });

    let vue = new Vue({
        el: '#app',
        data: {
            title: 'Geek 列表',
            todoItems: ['Geek', 'Java', 'Python']
        },
        methods: {
            // 要将组件的事件绑定到这个方法。
            removeItem: function (index) {
                console.log('删除了' + this.todoItems[index] + ', ok~');
                this.todoItems.splice(index, 1);// 删除元素。
            }
        }
    });
</script>

</body>
</html>

Vue.js 入门小结。

核心：数据驱动，组件化。Java 后端和前端的桥梁 ~ axios。

借鉴了 AngulaJS 的模块化开发和 React 的虚拟 Dom。虚拟 Dom 就是把 Dom 操作放到内存中执行。

组件化。

组合组件 slot 插槽。
组件内部绑定事件需要使用到 this.$emit(‘事件名’, 参数);。
计算属性的特色，缓存计算数据。

遵循 SoC 关注度分离原则。Vue 是纯粹的视图框架，并不包含比如 Ajax 之类的通信功能，为了解决问题我们需要使用 Axios 框架做异步通信。

Vue 的开发都是要基于 Node.js，实际开发采用 vue-cli 脚手架开发，vue-router 路由，vuex 做状态管理。Vue UI，界面我们一般使用 ElementUI（饿了么出品）or alibaba / ice 来快速搭建项目。

Vue CLI

Vue CLI 是官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板。（类似与 Maven archetype）。

需要 Node.js。

https://blog.csdn.net/lyfGeek/article/details/107058977

安装 vue-cli。

npm install vue-cli -g

geek@geek-PC:~/geek/vue_geek$ sudo npm install vue-cli -g
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
/usr/local/bin/vue-init -> /usr/local/lib/node_modules/vue-cli/bin/vue-init
/usr/local/bin/vue-list -> /usr/local/lib/node_modules/vue-cli/bin/vue-list
/usr/local/bin/vue -> /usr/local/lib/node_modules/vue-cli/bin/vue
+ vue-cli@2.9.6
added 238 packages from 205 contributors in 64.939s

geek@geek-PC:~/geek/vue_geek$ vue list

  Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

创建。

geek@geek-PC:~/geek/vue_geek$ vue init webpack my-project

? Project name my-project
? Project description A Vue.js project
? Author Geek
? Vue build runtime
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "my-project".

# Project initialization finished!
# ========================

To get started:

  cd my-project
  npm install (or if using yarn: yarn)
  npm run dev
  
Documentation can be found at https://vuejs-templates.github.io/webpack

项目结构。

geek@geek-PC:~/geek/vue_geek$ cd my-project/
geek@geek-PC:~/geek/vue_geek/my-project$ ls
build  config  index.html  package.json  README.md  src  static
geek@geek-PC:~/geek/vue_geek/my-project$ tree
.
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── index.html
├── package.json
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
└── static

6 directories, 18 files
geek@geek-PC:~/geek/vue_geek/my-project$

install。

geek@geek-PC:~/geek/vue_geek/my-project$ npm install
npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated

> core-js@2.6.11 postinstall /home/geek/geek/vue_geek/my-project/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> ejs@2.7.4 postinstall /home/geek/geek/vue_geek/my-project/node_modules/ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)


> uglifyjs-webpack-plugin@0.4.6 postinstall /home/geek/geek/vue_geek/my-project/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {"node":"<8.10.0"} (current: {"node":"12.18.2","npm":"6.14.5"})
npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/watchpack-chokidar2/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/webpack-dev-server/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN ajv-keywords@3.5.1 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.

added 1274 packages from 673 contributors and audited 1281 packages in 72.549s

29 packages are looking for funding
  run `npm fund` for details

found 15 vulnerabilities (3 low, 8 moderate, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details
geek@geek-PC:~/geek/vue_geek/my-project$ npm audit fix
npm WARN ajv-keywords@3.5.1 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1 package from 4 contributors and updated 1 package in 7.138s

29 packages are looking for funding
  run `npm fund` for details

fixed 6 of 15 vulnerabilities in 1281 scanned packages
  1 vulnerability required manual review and could not be updated
  6 package updates for 8 vulnerabilities involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
geek@geek-PC:~/geek/vue_geek/my-project$ npm audit fix --force
npm WARN using --force I sure hope you know what you are doing.
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.

> fsevents@1.2.13 install /home/geek/geek/vue_geek/my-project/node_modules/watchpack-chokidar2/node_modules/fsevents
> node install.js


Skipping 'fsevents' build as platform linux is not supported

> fsevents@1.2.13 install /home/geek/geek/vue_geek/my-project/node_modules/webpack-dev-server/node_modules/fsevents
> node install.js


Skipping 'fsevents' build as platform linux is not supported
npm WARN ajv-keywords@3.5.1 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN html-webpack-plugin@2.30.1 requires a peer of webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3 but none is installed. You must install peer dependencies yourself.

+ url-loader@4.1.0
+ css-loader@3.6.0
+ copy-webpack-plugin@6.0.3
+ webpack@4.43.0
+ webpack-dev-server@3.11.0
+ webpack-bundle-analyzer@3.8.0
added 204 packages from 133 contributors, removed 372 packages, updated 53 packages and moved 9 packages in 127.396s

32 packages are looking for funding
  run `npm fund` for details

fixed 14 of 15 vulnerabilities in 1282 scanned packages
  1 vulnerability required manual review and could not be updated
  6 package updates for 8 vulnerabilities involved breaking changes
  (installed due to `--force` option)
geek@geek-PC:~/geek/vue_geek/my-project$

geek@geek-PC:~/geek/npm_geek$ cd my-project/

geek@geek-PC:~/geek/npm_geek/my-project$ npm install

geek@geek-PC:~/geek/npm_geek/my-project$ npm run dev

> my-project@1.0.0 dev /home/geek/geek/npm_geek/my-project
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 25/29 modules 4 active .../geek/npm_geek/my-project/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting                                                                        

 DONE  Compiled successfully in 2288ms                                              3:30:27 PM

 I  Your application is running here: http://localhost:8080

在这里插入图片描述

webpack。

https://www.webpackjs.com/

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

可以从这里了解更多关于 JavaScript 模块和 webpack 模块的信息。
从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：

入口(entry)
输出(output)
loader
插件(plugins)
本文档旨在给出这些概念的高度概述，同时提供具体概念的详尽相关用例。

安装。

npm install --global webpack
npm install --global webpack-cli

geek@geek-PC:~$ sudo npm install --global webpack
[sudo] password for geek: 
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
/usr/local/bin/webpack -> /usr/local/lib/node_modules/webpack/bin/webpack.js
npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {"node":"<8.10.0"} (current: {"node":"12.18.2","npm":"6.14.5"})
npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules/webpack/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/webpack/node_modules/watchpack-chokidar2/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ webpack@4.43.0
added 343 packages from 200 contributors in 43.251s

geek@geek-PC:~$ sudo npm install --global webpack-cli
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
/usr/local/bin/webpack-cli -> /usr/local/lib/node_modules/webpack-cli/bin/cli.js
npm WARN webpack-cli@3.3.12 requires a peer of webpack@4.x.x but none is installed. You must install peer dependencies yourself.

+ webpack-cli@3.3.12
added 185 packages from 127 contributors in 22.317s

geek@geek-PC:~$ webpack -v
4.43.0
geek@geek-PC:~$ webpack-cli -v
3.3.12

配置。

webpack.config.js。

entry。
入囗文件，指定 WebPack 用哪个文件作为项目的入囗。
output。
输出，指定 WebPack 把处理完成的文件放置到指定路径。
module。
模块。用于处理各种类型的文件。
plugins。
插件。eg. 热更新、代码重用等。
resolve。
设置路径指向。
watch。
监听，用于设置文件改动后直接打包。
hello.js。

// 暴露一个方法。
exports.sayHi = function () {
    document.write('<h1>Geek 李</h1>')
}

exports.sayHi2 = function () {
    document.write('<h1>Geek 李</h1>')
}

exports.sayHi3 = function () {
    document.write('<h1>Geek 李</h1>')
}

main.js。

let hello = require('./hello');

hello.sayHi();

webpack.config.js。

module.exports = {
    entry: './modules/main.js',
    output: {
        filename: './js/bundle.js'
    }
}

在这里插入图片描述

geek@geek-PC:~/WebstormProjects/webpack_geek$ webpack
Hash: 0e890b34fd615174f47a
Version: webpack 4.43.0
Time: 167ms
Built at: 07/19/2020 10:09:53 PM
         Asset     Size  Chunks             Chunk Names
./js/bundle.js  1.1 KiB       0  [emitted]  main
Entrypoint main = ./js/bundle.js
[0] ./modules/main.js 48 bytes {0} [built]
[1] ./modules/hello.js 245 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
geek@geek-PC:~/WebstormProjects/webpack_geek$

在这里插入图片描述

html 直接使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

</body>
</html>

vue-router。

https://router.vuejs.org/zh/

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

geek@geek-PC:~/geek/vue_geek$ npm install vue-router --save-dev

lyfGeek

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue.js ~ 渐进式 JavaScript 框架。

Vue.js ~ 渐进式 JavaScript 框架。
复制链接

扫一扫

专栏目录

Vue.js ~ 渐进式 JavaScript 框架。

Vue.js ~ 渐进式 JavaScript 框架。

文章目录

what。

vue-element-admin。

前端 MV* 模式。

MVC。

MVP。

MVVM。

Hello World。

v-bind。

v-if。

v-for。

绑定事件 ~ v-on。

双向绑定。

Vue 组件。

axios ~ 易用、简洁且高效的 http 库。

Vue 生命周期。

计算属性。

slot。

自定义事件内容分发。

Vue.js 入门小结。

Vue CLI

需要 Node.js。

安装 vue-cli。

创建。

webpack。

安装。

配置。

vue-router。

“相关推荐”对你有帮助么？