pack vue web 懒加载_vue图片懒加载vue-lazyload为啥看不见加载的圈 - CSDN
精华内容
参与话题
  • 使用ASP.NET Core MVC的Vue.Js

    千次阅读 2019-06-13 13:39:48
    VUE.JS简介 DOT NET Core 下载和安装Visual Studio 2017 ASP.NET Core Spa模板 基础知识和设置 Node.js 节点包管理(NPM) Bower, Yarn Web-pack,Grunt或Gulp Gulp/Grunt Web-Pack与Gulp / Grunt Type-...

    目录

    内容主题

    VUE.JS简介

    DOT NET Core

    下载和安装Visual Studio 2017

    ASP.NET Core Spa模板

    基础知识和设置

    Node.js

    节点包管理(NPM)

    Bower, Yarn

    Web-pack,Grunt或Gulp

    Gulp/Grunt

    Web-Pack与Gulp / Grunt

    Type-Script

    Babel

    安装VUE-CLI

    设置Dot Net Core MVC和NPM

    在ASP.NET Core中使用Bower或NPM或Yarn管理客户端软件包

    从项目中删除默认Bower

    将NPM客户端程序包安装程序添加到项目中

    Axios-Package

    package.json

    tsconfig.json用于Type-Script

    使用Dot NET Core MVC中的Web-Pack设置VUE.JS

    设置Webpack任务运行器

    使用Dot Net Core MVC的简短演示项目Vue.js

    Hello-World 视图页面

    如何提交表单


    本文指导使用Vue.js实现基于Web的应用程序。这些是初学者级指南,用于了解客户端和服务器端之间的通信。我们将配置设置以及如何使用Vue.Js,它是用于客户端开发的JavaScript框架。服务器端部分将由Dot NET Core MVC完成。让我们看看如何使用Dot NET Core设置Vue.Js.

    内容主题

    • Vue.js安装和基本设置
    • Dot NET Core下载和设置
    • ASP.NET Core SPA模板
    • Node.jsNPM设置
    • 包安装的基本知识(NPMBowerYarn
    • Web-packGruntGulp的基础知识
    • 引入类型脚本,Babel
    • 设置Dot Core MVCNPM
    • 使用Axios-Package
    • 设置Web-pack Task Runne

    VUE.JS简介

    它是用于单页面应用程序(SPA)开发的JavaScript框架。这个JavaScript框架类似于AngularReact.jsKnockout。每个都有不同的焦点,你必须决定哪一个对你有好处。这取决于你的情况。如果你必须使用动态DOM操作,那么React.js是好的。如果你需要数据驱动的CRUD操作,那么Angular是好的。Vue.Js的位置介于这些情况之间;但它仍然喜欢处理DOM。这些只是我个人的意见。

    DOT NET Core

    我不需要介绍Dot NET Framework。但这一次,Dot NET Core开始将革命带入未来。是的,我在谈论跨平台。如果您的目标是在WindowsMacLinux等多个平台上运行您的应用程序,那么Dot Net Core是完美的。因为它专注于微服务,如果你喜欢docker-containers,那就是另一个考虑因素。您知道容器与虚拟机(VM)相比是轻量级的。

    下载和安装Visual Studio 2017

    ASP.NET Core Spa模板

    默认情况下,您将获得使用ASP.NET Core 2.0的单页应用程序模板。

    您还可以安装ASP.NET Core SPA模板。此模板与AngularAureliaKnockoutReactReact + ReduxVue.jsASP.NET Core 1.1兼容。找到下载模板的给定链接。(http://vsixgallery.com/extension/4336beed-a389-4f86-9138-40d258e78ccf/

    您还可以下载适用于HTML Intelligence和代码段的Vue.js Pack 2017https://marketplace.visualstudio.com/items?itemName=MadsKristensen.VuejsPack-18329

    基础知识和设置

    Node.js

    Node.js是开源命令行工具。它使用Google V8 JavaScript引擎来执行代码。你可以下载它。(https://nodejs.org/en/download/

    节点包管理(NPM

    NPM是一个命令行实用程序。你可以用它来安装第三方包,版本管理和依赖管理。系统将要求您使用Node.js安装NPM。如果您想安装NPM,请不要忘记安装Node.js。建议安装Node.js以运行NPM

    命令行:

    • 安装NPM npm install -g npm
    • 更新: npm update -g
    • 要查看已安装的版本: npm -v

    Bower, Yarn

    BowerYarnNPM类似。您可以使用NPMYarnBower。对于包装安装,Yarn有时快几秒,然后是NPM; 这取决于实际情况。

    Web-pack,GruntGulp

    如果你问我,什么是Web-pack?我会保持沉默。让我们看一下web-pack将为您提供解决方案的一种情况。

    • 最终用户:我喜欢你的T恤。你是怎么做到的?
    • Eva.js:我的男朋友约翰给我这个礼物。
    • 最终用户:好的,和约翰谈谈并问他。
    • Eva.js:你好!你在哪里买酷T恤?
    • John.js:我是从网上商店买的。

    因此,最终用户再发送一个Http请求以获得预期结果。这意味着,有一个依赖关系图,其中Eva.js调用John.js

    现在,如果我们将这两个JS文件合并到一个包中,那么单个http请求就可以找到该文件。

    所以,你需要web-pack来制作这些捆绑包。您可以使用web-packJS文件进行连接,缩小(minify )或混淆(uglify )

    • 连接将所有文件附加到一个大文件中。
    • 缩小是在不改变功能的情况下删除不必要的空格和字符。

    • 混淆正在以难以理解的格式转换代码。

    Gulp/Grunt

    GulpGruntweb-pack类似。您可以使用这些来连接,缩小或混淆您的JSCSS文件。

    Web-PackGulp / Grunt

    Web-Pack

    Gulp/Grunt

    Type-Script

    ECMAScriptJavaScript的标准。所有浏览器仍然不支持新标准。Type-Script的工作方式类似于一个编译器,它可以编译并将其从(例如,es-2016es-2017es5java-script代码转换。最后,它使浏览器兼容。

    如果你来自.NET后台工程师,那么我会说,它增加了一些编写JavaScript的美感——命名空间、接口、泛型、访问修饰符、空检查等。你会觉得你在.NET家里。

    Babel

    Babel也是一个JavaScript转换器,它编译和转换旧的ES5 JavaScript以使浏览器兼容。

    安装VUE-CLI

    • 首先,您必须确保我们的系统上已经安装了Node.jsNPM
    • 使用以下命令在本地系统上全局安装Vue CLI npm install -g vue-cli

    设置Dot Net Core MVCNPM

    • 使用MVC创建一个新的.NET Core项目
    • 选择.NET Core > ASP.NET Core Web Application

    • 选择Web应用程序(MVC):

    ASP.NET Core中使用BowerNPMYarn管理客户端软件包

    如果选择MVC模板,则它会自动使用Bower进行客户端软件包安装。

    从项目中删除默认Bower

    我将为此演示项目使用NPM。要从项目中删除Bower

    • 删除——lib文件夹。您将在wwwroot文件夹中找到它。
    • 删除bower.json配置文件。
    • 最后,卸载然后再次重新加载项目。

    NPM客户端程序包安装程序添加到项目中

    package.json文件添加到项目中。通过右键单击解决方案并搜索npm来添加此文件。您将获得npm配置文件。

    添加文件后,卸载并重新加载项目。您将在依赖项中看到npm文件夹。

    Axios-Package

    在这个项目中,我将axios-package用于http客户端请求。这是一个基于承诺的http客户端。使用'npm install axios'安装此软件包。

    package.json

    您可以将内容复制并粘贴到package.json文件中,Visual-Studio将为您恢复所有包。

    {
      "name": "Rony.DotNetCore.HelloWorld",
      "version": "0.0.0",
      "devDependencies": {
        "@types/requirejs": "^2.1.28",
        "axios": "^0.16.2",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-env": "^1.6.0",
        "babel-preset-es2015": "^6.24.1",
        "bootstrap": "^4.0.0-beta",
        "bootstrap-material-design": "4.0.0-beta.3",
        "css-loader": "^0.28.7",
        "fuse.js": "^3.2.0",
        "jquery": "^3.2.1",
        "material-design-colors": "^1.0.2",
        "moment": "^2.19.1",
        "numbro": "^1.11.0",
        "popper.js": "^1.12.5",
        "style-loader": "^0.19.0",
        "url-loader": "^0.6.2",
        "vue": "2.4.4",
        "vue-loader": "^13.0.5",
        "vue-template-compiler": "2.4.4",
        "webpack": "^3.6.0"
      }
    }

    tsconfig.json用于Type-Script

    为了避免额外的复杂性,我没有将type-script添加到此项目中。我使用babel。因为在这里我的主要目标不是展示转换器。但是如果要添加type-script,则必须使用以下内容将tsconfig.json文件添加到项目中,并根据需要更改目标版本。

    {
      "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "experimentalDecorators": true,
        "module": "es2015",
        "moduleResolution": "node",
        //"target": "es5",
        "target": "es2015",
        "removeComments": true,
        "sourceMap": true,
        "skipDefaultLibCheck": true,
        "types": [ "requirejs" ]
      },
      "compileOnSave": true,
      "exclude": [
        "bin",
        "node_modules"
      ]
    }

    添加tsconfig.json文件后,您必须将HelloWorld.cshtml.js更改为HelloWorld.cshtml.ts。最后,您已准备好在ts文件中使用类型脚本。

    使用Dot NET Core MVC中的Web-Pack设置VUE.JS

    如果您没有安装 web-pack,请安装(nmp install webpack –g)它。现在将webpack.config.js文件添加到项目中。在这里,我们将设置js文件的入口点。

    entry: {
            app: './wwwroot/js/site.js',
            HelloWorld: './Views/Home/HelloWorld.cshtml.js',
            EmployeeIndex: './Views/Home/EmployeeIndex.cshtml.js
        }

    我们需要设置输出目录以删除bundle js文件。

    output: {
            publicPath: "/js/",
            path: path.join(__dirname, '/wwwroot/js/'),
            filename: '[name].bundle.js'
        }

    完整配置如下。您可以复制并粘贴到webpack.config.js文件中,并根据需要进行更改。

    /// <binding ProjectOpened='Watch - Development' />
        "use strict";
    const path = require('path');
    const webpack = require('webpack');
    module.exports = {
        entry: {
            app: './wwwroot/js/site.js',
            HelloWorld: './Views/Home/HelloWorld.cshtml.js',
            EmployeeIndex: './Views/Home/EmployeeIndex.cshtml.js'
         
        },
        plugins: [
            new webpack.ProvidePlugin({
                '$': 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default'],
                moment: 'moment',
                axios: 'axios',
                numbro: 'numbro'
            }),
            new webpack.optimize.UglifyJsPlugin()
        ],
        output: {
            publicPath: "/js/",
            path: path.join(__dirname, '/wwwroot/js/'),
            filename: '[name].bundle.js'
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /(node_modules)/,
                    query: {
                        presets: ['es2015']
                    }
                },
                {
                    test: /\.ts$/,
                    exclude: /node_modules|vue\/src/,
                    loader: "ts-loader",
                    options: {
                        appendTsSuffixTo: [/\.vue$/]
                    }
                },
                {
                    test: /\.css$/,
                    loaders: ['style-loader', 'css-loader']
                },
                {
                    test: /\.(png|jpg|gif)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                },
                {
                    test: /\.vue$/,
                    loader: 'vue-loader',
                }
            ]
        },
        resolve: {
            alias: {
                vue: 'vue/dist/vue.js'
            },
            extensions: ['.js', '.vue']
        }
    };

    设置Webpack任务运行器

    您需要Web-pack 任务运行器(Task Runner)来编译和捆绑js文件。您也可以直接从命令行编译。在这种情况下,您不需要webpack任务运行器。无论如何,如果要安装,请转到下载链接并进行安装。安装完成后,您将在项目中找到给定的窗口。

    如果您需要更改JS文件,那么它将由此工具自动编译。您甚至可以手动运行它。要手动运行,请转到Task Runner Explorer的左侧。选择Run并右键单击鼠标按钮,然后您将找到runBindings选项。单击运行。等几秒钟,你会得到结果。

    使用Dot Net Core MVC的简短演示项目Vue.js

    我创建了一个非常轻量的项目,向您展示唯一的配置及其工作原理。您可以创建一个Dot NET核心MVC应用程序项目。要设置项目,请按照上面给出的上述步骤配置应用程序。

    Hello-World 视图页面

    在这个项目中,我在View> Home目录中添加了一个'HelloWorld.cshtml '视图页面和'HelloWorld.cshtml.js '

    HelloWorld.cshtml文件,我已经添加了两个变量,如messagetwoWayBindingMessage向您展示——我们如何能结合和沟通Vue.jsView

    @{
        ViewData["Title"] = "Hello World - Page";
    }
    <h4>@ViewData["Title"]</h4>
    <h3>@ViewData["Message"]</h3>
    
        <div id="view">
            <span>One way binding message:{{message}}</span>
                <br /><hr />
                <span>2-way binding msg: {{twoWayBindingMessage}}</span><br />
                <br/>
                <input type="text" v-model="twoWayBindingMessage">
        </div>
    
    <script src="~/js/HelloWorld.bundle.js" asp-append-version="true"></script>

    这里,message带有双花括号的变量是单向静态绑定。如果需要,可以使用动态绑定。在此文件的末尾,有一个从输出目录添加的JavaScript包文件。

    HelloWorld.cshtml.jsJS文件包含给定的行。您将在vue对象的数据中找到变量。

    import Vue from "vue";
    document.addEventListener('DOMContentLoaded', function (event) {
        let view = new Vue({
            el: document.getElementById('view'),
            mounted: function () { },
            data: {
                message: "One-way binding msg",
                twoWayBindingMessage:"Type here ..."
            }
        });
    });

    如何提交表单

    我已将EmployeeIndex.cshtml ”视图页面和EmployeeIndex.cshtml.js ”添加到View>Home目录中。在这里,我添加了几行代码,向您展示如何使用axios发布数据。其余的getputdelete方法是相似的。

    EmployeeIndex.cshtml文件中,添加以下内容:

    @{
      ViewData["Title"] = "Add Employee";
    }
    <h3>@ViewData["Title"]</h3>
    <h3>@ViewData["Message"]</h3>
    
    @{
        ViewData["Title"] = "Add Employee";
    }
    <h3>@ViewData["Title"]</h3>
    <h3>@ViewData["Message"]</h3>
    
    <div id="view">
        <form>
            <div class="form-group">
                <label for="FirstName">First Name</label>
                <input type="text" class="form-control" 
    
                id="firstName" name="firstName" 
    
                v-model="firstName" placeholder="firstName ">
            </div>
            <div class="form-group">
                <label for="LastName">Last Name</label>
                <input type="text" class="form-control" 
    
                id="lastName" name="lastName" 
    
                v-model="lastName" placeholder="Last Name">
            </div>
            <div class="form-group">
                <label for="address">Address</label>
                <textarea class="form-control" rows="3" 
    
                id="address" name="address" 
    
                v-model="address" placeholder="Address"></textarea>
            </div>
            <button v-on:click="addEmployee">Add Employee</button>
        </form>
    </div>
    
    <script src="~/js/EmployeeIndex.bundle.js"></script>

    我已将给定内容添加到EmployeeIndex.cshtml.js文件中。如果你需要新的方法putgetdelete等,你可以添加到methods:{…}中:

    import Vue from "vue";
    import http from 'axios';
    
    document.addEventListener('DOMContentLoaded', function (event) {
        let view = new Vue({
            el: document.getElementById('view'),
            mounted: function () { },
            data: {
                firstName: "",
                lastName: "",
                address:"",
                message: "This is a simple message from vue"
            },
            methods:
            {
                addEmployee: function () {
                    try {
                        var url = '/Home/EmployeeIndex/';
                        var data = {
                            "firstName": this.firstName,
                            "lastName": this.lastName,
                            "address": this.address
                        };
                        var self = this;
                        http.post(url, data)
                            .then(function (response) {
                                console.log("successfully added!");
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    } catch (ex) {
                        console.log(ex);
                    }
    
                   return false;
                },
            }
        });
    });

    在文件的顶部,我导入了vueaxios

    import Vue from "vue";
    import http from 'axios';

    要发布数据,我使用了来自axioshttp.post(url, data)方法。

    现在,运行该项目,并为firstNamelastNameaddress键入一些值。如果单击Add-Employee按钮,则可以将这些值从客户端传递到控制器。

    有许多方法可以配置和设置项目。我在本文中添加了一个小型的演示项目。在演示中,我包含了非常简单和基本的代码但是您可以为模板和组件文件使用单独的文件来实现客户端开发。

     

    原文地址:https://www.codeproject.com/Articles/1214885/Vue-Js-with-ASP-NET-Core-MVC

    展开全文
  • webpack常见面试题

    千次阅读 2019-06-27 10:57:46
    1.从零开始搭建一个简单的基于webpack的vue开发环境 a.安装webpack npm i webpack -g b.项目初始化 1)新建项目文件夹‘myproject’ 2)创建package.json.。 npm init -y 3)安装vue,webpack,webpack-dev-...

    1.从零开始搭建一个简单的基于webpack的vue开发环境

    a.安装webpack   npm i webpack -g

    b.项目初始化 

          1)新建项目文件夹‘myproject’

          2)创建package.json.。 npm init -y

          3)安装vue,webpack,webpack-dev-server   npm i vue --save  npm i webpack webpack-dev-server --save-dev

          4)根目录下新建index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    </body>
    </html>

           5)根目录下新建webpack.config.js

    var path = require('path');
    var webpack = require('webpack');
    
    module.exports = {};

          6)新建src文件夹,src文件夹下新建main.js

    项目初始化完了之后,整个项目目录是这个样子

    c.js模块化

    d.引入vue

    main.js

    import Vue from 'vue';
    
    var app = new Vue({
    el: '#app',
    data: {
    message: 'Hello Vue!'
    }
    });

    e.引入scss和css

    f.使用babel转码

    g.引入图片资源

    h.source-map

    2.什么是webpack

    webpack是一个打包模块化javascript的工具,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

    3.loader,plugin

    loader:

    loader 让 webpack 能够去处理那些非 JavaScript 文件
    对于loader,它就是一个转换器,将A文件进行编译形成B文件,这里操作的是文件
    loader可以将sass,less文件的写法转换成css,而不在使用其他转换工具。
    可以将ES6或者ES7的代码,转换成大多数浏览器兼容的JS代码。

     

    plugin 

    • css-loader:加载 CSS,支持模块化、压缩、文件导入等特性
    • style-loader:把 CSS 代码注入到 JavaScript 中,通过 DOM 操作去加载 CSS
    插件目的在于解决 loader 无法实现的其他事

     

     

     

    • mini-css-extract-plugin:分离css文件
    • clean-webpack-plugin:删除打包文件
    展开全文
  • weex 实践:工具框架

    千次阅读 2017-02-17 17:11:14
    weex给人的感觉就是做单页,只有集成到现有应用,就连页面切换比如导航,tabbar,切换的src竟然是url,即带http的js,而不是项目里面vue文件或者we文件。刚开始接触的人肯定懵逼,无从下手... 这篇文章我会介绍一些...

    http://www.jianshu.com/p/c0828c33b025

    官方提供的脚手架用来作为入门确实不错,但真正用来开发项目,功能又不足。weex给人的感觉就是做单页,只有集成到现有应用,就连页面切换比如导航,tabbar,切换的src竟然是url,即带http的js,而不是项目里面vue文件或者we文件。刚开始接触的人肯定懵逼,无从下手...
    这篇文章我会介绍一些我刚开始接触时的思路,与其说是工具,不入说是各种架构。

    weex-pack

    看到这个工具的时候眼前一亮,前面捣鼓官网demo的时候,一直苦恼于vue版如何将vue文件打包成对应js文件,还有分别部署集成weex到各平台。研究了demo里面的配置,想搬到beta版里面来,最终还是不成功,在将要放弃的时候,看到了weex-pack,纠结很久决定选择weex的we语法。

    weexpack应该也是weex团队出品,官方demo就用到了。下面是摘了weexpack的介绍:

    weexpack 是 weex 新一代的工程开发套件,是基于weex快速搭建应用原型的利器。它能够帮助开发者通过命令行创建weex工程,添加相应平台的weex app模版,并基于模版从本地、GitHub 或者 weex 应用市场安装插件,快速打包 weex 应用并安装到手机运行,对于具有分享精神的开发者而言还能够创建weex插件模版并发布插件到weex应用市场。

    安装流程参考文档。

    安装并创建项目后,打包h5并运行就可以在浏览器看到效果:

    $ weexpack build web
    $ weexpack run web
    HanJindeiMac:weexpack_demo hanjin$ weexpack run web
    
     => Starting web service
    npm WARN xxx@1.0.0 No repository field.
    
    > xxx@1.0.0 build /Users/hanjin/weex/weexpack_demo
    > webpack
    
    Hash: 23effaf8e8e5d570d7ff
    Version: webpack 1.14.0
    Time: 1219ms
                               Asset     Size  Chunks             Chunk Names
                            index.js   183 kB       0  [emitted]  index
                     modules/main.js  7.64 kB       1  [emitted]  modules/main
                     modules/next.js  7.64 kB       2  [emitted]  modules/next
    weex_tmp/h5_render/demo/index.js  11.2 kB       3  [emitted]  weex_tmp/h5_render/demo/index
      [85] ./src/common/api.js 1.11 kB {0} [built]
        + 95 hidden modules
     => server is running
        please open http://localhost:8080/web/index.html

    h5_demo.gif

    接下来就可以打包运行ios或者安卓应用了,在platforms目录里面就可以看到集成了weex,自动构建了包含了jsbunled 的ios和安卓项目工程,如果安装了xcode,android studio,还会自动打开模拟器并运行。

    HanJindeiMac:weexpack_demo hanjin$ weexpack platform list
    Installed platforms:
      android
      ios
    Available platforms: 
      android ^6.2.1
      browser undefined
      ios ^4.0.5

    ios和安卓工程.png

    很赞吧,自动构建自动打包,对应的we文件都能打包成js,前端开发者的福音,可惜还不支持vue,说是还在开发计划中,weex sdk推出sdk0.10稳定版后跟进。issues
    这里有一个支持vue的weex-vue-starter-kit,有兴趣的可以试试。

    这是我的demo地址:https://github.com/oneaileJ/weexDemos/tree/master/weexpack_demo

    另外还有几个非常好的参考demo分享给大家:WeexOneweex-android-joke

    Weex + Vuex + vue-router

    在学习Vue的时候,我就接触到了Vuexvue-router
    官方也提供了一个基于 Weex 和 Vue 开发的完整项目 weex-hackernew 。

    • vue-router是vue的路由工具,用vue.js编写应用的时候,我们可以把所有组件(页面也即组件),都组合在一个应用里面,只要把 vue-router 加进来,配置好组件和路由映射,然后告诉 vue-router 在哪里渲染它们,利用路由进行切换实现页面跳转,但weex只支持路由的abstract跳转模式。
      vue-router还支持了vue的全部过度动效transition,而且weex也支持transition,so,页面切换解 决了,切换的效果有了。

    • Vuex是用来状态管理的,构建中大型应用的时候,可以更好地在组件外部管理状态,把组件的共享状态抽取出来,用一个全局单利模式来管理。利用Vuex就可以全局管理路由状态,

    配置路由:

    export default new Router({
      // mode: 'abstract',
      routes: [
        { path: '/top', component: createStoriesView('top') },
        { path: '/new', component: createStoriesView('new') },
        { path: '/show', component: createStoriesView('show') },
        { path: '/ask', component: createStoriesView('ask') },
        { path: '/job', component: createStoriesView('job') },
        { path: '/article/:url(.*)?', component: ArticleView },
        { path: '/item/:id(\\d+)', component: CommentView },
        { path: '/user/:id', component: UserView },
        { path: '/', redirect: '/top' }
      ]
    })

    在入口套上 <router-view></router-view>,所有组件页面将在这里渲染。

    <template>
      <div @androidback="back">
        <router-view></router-view>
      </div>
    </template>
    
    <script>
      export default {
        methods: {
          back: function () {
            this.$router.back()
          }
        }
      }
    </script>

    在配置里面,将路由和状态注册到根组件上,就可以全局调用了:

      // sync the router with the vuex store.
    // this registers `store.state.route`
    sync(store, router)
    
    // register global utility filters.
    Object.keys(filters).forEach(key => {
      Vue.filter(key, filters[key])
    })
    
    // register global mixins.
    Vue.mixin(mixins)
    
    // create the app instance.
    // here we inject the router and store to all child components,
    // making them available everywhere as `this.$router` and `this.$store`.
    new Vue(Vue.util.extend({ el: '#root', router, store }, App))

    利用混合,封装跳转代码,然后所有需要切换的时候就可以直接调用 jump () :

     export default {
      methods: {
        jump (to) {
          if (this.$router) {
            this.$router.push(to)
          }
        }
      }
    }

    看下ArticleView.vue组件的调用。

    <template>
      <div>
        <web class="webview" :src="url | https"></web>
        <text class="fixed-button" @click="jump(`/`)">back</text>
      </div>
    </template>

    在项目中使用 Vuex 和 vue-router ,确实能够实现同一份代码,在 iOS、Android、Web 下都能完整地工作。由于所有页面和组件都组合在一个文件里面,打包js文件势必很大,加载费时,所有请求都在一个文件里面,也费时,相对于原生组件还是有差距,体验也有不足。
    所以,在开发h5页面的时候可以采用Vuex 和 vue-router,移动端还是采用weex提供组件比较好。

    降级

    降级使用就是用weex提供的web组件或者在原生应用里面利用原生web组件,嵌入weex生成的h5页面,利用浏览器来加载h5页面。
    很多app在原生项目里面都有用web组件,加载webapp页面或者h5页面,来达到构建整个应用或者混合,比如很多应用的超炫的活动页,更新频繁,就可以这么干,我见过然后自己也这样干过。
    这样确实能节省成本,一次生成,三端同时实现。但需要用到原生功能的时候还是要进行原生扩展。

    参考

    Vuex
    vue-router 2
    weex-pack
    weex-vue-starter-kit
    Weex Market

    展开全文
  • webpack+vue创建简单项目并整合iview

    千次阅读 2017-10-20 23:26:41
    第一步:安装nodejs环境 下载地址:nodejs官网 下载后傻瓜式安装即可,安装成功后再控制台输入 node -v 如果安装正确的话 会出现 如果没有出现 版本号 而是出现node 不是内部命令的话 需要配置一下环境变量,如果...

    第一步:安装nodejs环境

    下载地址:nodejs官网   下载后傻瓜式安装即可,安装成功后再控制台输入 node -v   如果安装正确的话  会出现


    如果没有出现 版本号 而是出现node 不是内部命令的话 需要配置一下环境变量,如果已经出现版本号,此步骤可以忽略。

             怎样配置环境变量?将安装node的路径剪切,右键我的电脑-->属性-->高级系统环境设置-->环境变量-->找到path环境变量。将node文件夹的路径粘贴到已有的环境变量后面记得要在环境变量 前面加上   ;      例如  ;C:\Program Files\nodejs\ 即可


    我们可以在控制台在输入一下命令,查看是否已经成功的安装了npm   npm -v  如果出现版本号说明已经安装成功,



    下面我们就可以进行,vue 的脚手架的安装了 也就是vue-cli


    在控制台输入 npm install -g vue-cli 


    等待完成安装即可。


    我们使用webpake模板生成一个项目   vue init webpack 文件名称



    安装包依赖   npm install  

    这是一个非常漫长的过程如果感觉太慢可以安装一个阿里的镜像,cnpm    

     npm install -g cnpm --registry=https://registry.npm.taobao.org

    这样我们可以ctrl+c 结束掉当前下载输入 cnpm install 进行安装。


    当安装完成后 我们执行,cnpm run dev 进行运行。如果控制台有出现下面情况说明项目已经启动起来了



    如果出现这个话面此时及其应该会打开一个网页。默认页面。此时运行成功


    会出现这样的画面。下面会有一些vue 的例子。

    那么vue我们搭建好了,现在开始集成iview


    使用脚手架安装iview    cnpm install iview save   



    成功后添加iview-loader加载器  npm install iview-loader --save-dev


    在页面进行测试




    大家可以参考iview 文档:文档地址 找到更适合自己的组件进行测试吧。

    展开全文
  • 具体文字配置可以参考这个文章https://www.jianshu.com/p/7e65608ddc0a ...如何所以的配置你都发现完全正确,却还不能正确显示, 需要注意检查package.json中svg-sprite-loader 的版本号,你有可能下载的 4...
  • VSCode 开发前端插件

    千次阅读 2020-09-12 12:22:43
    VSCode 开发前端插件VUEvue VUE vue
  • VUe+webpack构建单页router应用(一)

    千次阅读 2016-12-12 10:32:15
    这期想做的是通过webpack和vue-router搭建一个单页应用,并且将vue的transition组件加进去,做一个幻灯片的样子。 首先,贴上我的环境。 开始step1:安装vue cli 推荐更改为cnpm(淘宝的镜像),这样下
  • 使用webpack + vue多入口模式后,随着项目模块越来越多,整个项目的入口多达30多个,热更新变得缓慢,保存一次等待热加载的时间多达2-3分钟,这也意味着,改一下代码保存后要等2分多钟才能看到效果,非常影响开发...
  • vue.js 初体验— Chrome 插件开发实录

    千次阅读 2017-05-12 10:06:03
    通过一个Chrome插件的开发,来领略下vue.js的魅力。顺便也来了解下Chrome插件开发的一些基本知识。在日常工作中,开发一些小工具可以大大的提高我们的工作效率。
  • webpack 安装及使用详解步骤

    千次阅读 2019-02-25 01:41:42
    webpack 安装及使用详解步骤 一、起步 &amp;nbsp; &amp;nbsp;&amp;nbsp;1、安装&amp;nbsp; &amp;nbsp;&amp;nbsp;2、基本使用&amp;nbsp; &amp;nbsp;&amp;nbsp;...n
  • VSCode 前端必备插件

    万次阅读 2019-09-06 15:18:09
    VSCode 前端必备插件 Debugger for Chrome 让 vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来打断点调试 jQuery Code Snippets jquery 重度患者必须品 Path Intellisense 自动路劲补全,默认不带这...
  • import Mint from 'mint-ui' 下载了style-loader cnpm install style-loader -D 配置了webpack.config.js { test: /\.css$/, loader: 'style!css' }, 引入了style.css ...import 'mint-ui/li
  • 2018前端值得关注的技术

    万次阅读 2018-03-08 11:09:30
    1.前言2017悄然过去,2018已经来到。人在进步,技术在发展。2018年前端有哪些领域,技术值得关注,哪些技术会兴起,哪些技术会没落。下面就我个人的判断进行一个预测判断,希望能对大家起到一个参考作用!...
  • vue清单列表

    千次阅读 2019-07-06 16:24:43
    Skip to content This repository Pull requests Issues Marketplace Explore Sign out Watch1,435 Star25,897 ......
  • webpack这个单词,我们可以拆开来读:webpackpack是啥意思?打包,对吧? 所以webpack的核心就是打包,将所有的资源全部打包压成一个个模块,就像酱紫滴: 我们这节课重点讲一下css的打包。 有同学就犯...
  • webpack入门和实战(一)--webpack配置及技巧

    万次阅读 多人点赞 2018-09-18 14:24:06
     webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。webpack的官网是 ...
  • Weex入门教程之1,了解Weex

    千次阅读 2017-02-06 15:49:45
    用意主要是介绍Weex,并未涉及开发方面,好让我们开始开发之前充分地了解Weex到底是个什么。 以下描述主要摘取于: ...
  • VsCode前端开发十大神器插件

    万次阅读 2018-11-22 08:02:28
    Visual Studio Code作为小邹最喜爱的编辑器之一,毫无疑问也是目前市场上最流量的轻量级代码EDE之一。它确实从其它代码编辑器吸收了大量的概念,特别是Sublime Text和Atom。不过,它受欢迎的原因主要还是在于它的...
  • vue.js实战书籍笔记

    千次阅读 2019-10-16 17:20:34
    0. Vue的定义:渐进式技术栈,足以应付任何规模的应用,包括比较高级的功能,如解耦视图和数据,可复用组件,前端路由,状态管理,虚拟DOM。Vue官网:https://cn.vuejs.org/v2/guide/。 1. MVVM模式:vue的使用模式...
  • 本文涉及的主题包括Node.js,NPM,WebPack,Vue.js和.NET Core 3.1的介绍和安装;如何使用NPM和WebPack Task Runner运行/构建指令;如何使用ASP.NET Core 3.1 MVC设置Vue.js;并使用Vue.js和ASP.NET Core 3.1 MVC...
1 2 3 4 5 ... 16
收藏数 311
精华内容 124
关键字:

pack vue web 懒加载