精华内容
参与话题
问答
  • Vue.js 2.0之全家桶系列视频课程

    万人学习 2018-04-21 16:52:25
    基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿! 1. 包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等) 2. 采用笔记+代码案例的形式讲解,...
  • 新版vue脚手架中webpack已经封装好看不见,需要vue.config.js代替配置 let path = require('path') function resolve (dir) {  return path.join(__dirname, dir) } module.exports = { publicPath:'/wuhan', //...

    新版vue脚手架中webpack已经封装好看不见,需要vue.config.js代替配置

    let path = require('path')
    function resolve (dir) {
      return path.join(__dirname, dir)
    }
    module.exports = {
        publicPath:'/wuhan',  //部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致
        outputDir:'dist3', //打包路径地址,Default: 'dist' ,代替 output.path
        assetsDir:'assets1', //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
        indexPath:'test.html' ,//静态模板文件输出的地址
        filenameHashing:true, //生成的静态文件是否需要带有hash
      //   // 多页面开发的时候需要
      //   pages:{
      //     index: {
      //         // page 的入口
      //         entry: 'src/index/main.js',
      //         // 模板来源
      //         template: 'public/index.html',
      //         // 在 dist/index.html 的输出
      //         filename: 'index.html',
      //         // 当使用 title 选项时,
      //         // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      //         title: 'Index Page',
      //         // 在这个页面中包含的块,默认情况下会包含
      //         // 提取出来的通用 chunk 和 vendor chunk。
      //         chunks: ['chunk-vendors', 'chunk-common', 'index']
      //       },
      //       // 当使用只有入口的字符串格式时,
      //       // 模板会被推导为 `public/subpage.html`
      //       // 并且如果找不到的话,就回退到 `public/index.html`。
      //       // 输出文件名会被推导为 `subpage.html`。
      //       subpage: 'src/subpage/main.js'
      // },
      //   runtimeCompiler:false , // 将其设置为true将允许您在Vue组件中使用模板选项,但会为您的应用程序带来大约10 KB的额外负载。
      //   productionSourceMap:false,
      //   // configureWebpack: {
      //   //     plugins: [
      //   //       new MyAwesomeWebpackPlugin()
      //   //     ]
      //   //   }
      chainWebpack: config => {
        config.resolve.alias.set('@', resolve('src'))
      },
        css:{
            extract:true, //css抽出
            sourceMap: true, // source map
        },
        devServer: {
          host:'0.0.0.0',
          port:'8090',
          https:true,
          // 访问 : http://localhost:8090/api/info
          // 代理到 http://localhost:8081/api/info
          // 真正的接口地址:http://localhost:8081/new/api/info
            proxy: {
                '^/api': {
                  target: 'http://localhost:8081',
                  ws: true,
                  changeOrigin: true,
                  pathRewrite: {'^/api' : '/new/api'}
                  // pathRewrite: {'^/old/api' : '/new/api'}
                },
                '^/foo': {
                  target: 'http://localhost:8081'
                }
              }
          },
        parallel:4, //是否用多线程进行压缩
      //   // pwa://离线缓存配置,向PWA 插件传递选项。
    lintOnSave:false //不需要eslint校验
      }
    
    // 参考网站:
    //  https://cli.vuejs.org/config/
    
    
    展开全文
  • 全面学习vue.js配置,es6命令,解构赋值,symbol类型,set,weakSet,Map,WeakMap,Iterator遍历器,Generator函数结构,Promise对象,async函数,箭头函数,class类,proxy代理,Decorator修饰器,model模块,二进制...
  • Vue.js CLI4 Vue.config.js标准配置 (最全注释)

    万次阅读 多人点赞 2019-11-26 11:11:35
    Vue.js CLI工具 不知不觉发展到了4.0时代,CLI给人最直白的感受是没有了build文件夹跟config文件夹,所有的配置都在Vue.config.js完成。那么该文件的配置至关重要。现在我们来看一下最新配置是怎么配置的。 // vue....

    前言:

    Vue.js CLI工具 不知不觉发展到了4.0时代,CLI给人最直白的感受是没有了build文件夹跟config文件夹,所有的配置都在Vue.config.js完成。那么该文件的配置至关重要。现在我们来看一下最新配置是怎么配置的。

    有三种方式,推荐第二种标准版(无需安装依赖,直接复制即可配置)。

    1、依赖库
    npm install vue-cli-configjs
    
    2、标准版
    // vue.config.js
    const path =  require('path');
    const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
    const resolve = (dir) => path.join(__dirname, dir);
    module.exports = {
        publicPath: process.env.NODE_ENV === 'production' ? '/site/vue-demo/' : '/',  // 公共路径
        indexPath: 'index.html' , // 相对于打包路径index.html的路径
        outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
        assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录
        lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
        runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
        productionSourceMap: !IS_PROD, // 生产环境的 source map
        parallel: require("os").cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建。
        pwa: {}, // 向 PWA 插件传递选项。
        chainWebpack: config => {
            config.resolve.symlinks(true); // 修复热更新失效
            // 如果使用多页面打包,使用vue inspect --plugins查看html是否在结果数组中
            config.plugin("html").tap(args => {
                // 修复 Lazy loading routes Error
                args[0].chunksSortMode = "none";
                return args;
            });
            config.resolve.alias // 添加别名
                .set('@', resolve('src'))
                .set('@assets', resolve('src/assets'))
                .set('@components', resolve('src/components'))
                .set('@views', resolve('src/views'))
                .set('@store', resolve('src/store'));
        },
        css: {
            extract: IS_PROD,
            requireModuleExtension: false,// 去掉文件名中的 .module
            loaderOptions: {
                    // 给 less-loader 传递 Less.js 相关选项
                    less: {
                        // `globalVars` 定义全局对象,可加入全局变量
                        globalVars: {
                            primary: '#333'
                        }
                    }
            }
        },
        devServer: {
                overlay: { // 让浏览器 overlay 同时显示警告和错误
                  warnings: true,
                  errors: true
                },
                host: "localhost",
                port: 8080, // 端口号
                https: false, // https:{type:Boolean}
                open: false, //配置自动启动浏览器
                hotOnly: true, // 热更新
                // proxy: 'http://localhost:8080'   // 配置跨域处理,只有一个代理
                proxy: { //配置多个跨域
                    "/api": {
                        target: "http://172.11.11.11:7071",
                        changeOrigin: true,
                        // ws: true,//websocket支持
                        secure: false,
                        pathRewrite: {
                            "^/api": "/"
                        }
                    },
                    "/api2": {
                        target: "http://172.12.12.12:2018",
                        changeOrigin: true,
                        //ws: true,//websocket支持
                        secure: false,
                        pathRewrite: {
                            "^/api2": "/"
                        }
                    },
                }
            }
    }
    
    3、升级版
    // vue.config.js
    const path =  require('path');
    
    const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩, 按需引用
    const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // 开启gzip压缩, 按需写入
    const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 打包分析
    
    const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
    const resolve = (dir) => path.join(__dirname, dir);
    module.exports = {
        publicPath: process.env.NODE_ENV === 'production' ? '/site/vue-demo/' : '/',  // 公共路径
        indexPath: 'index.html' , // 相对于打包路径index.html的路径
        outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
        assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录
        lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
        runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
        productionSourceMap: !IS_PROD, // 生产环境的 source map
        parallel: require("os").cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建。
        pwa: {}, // 向 PWA 插件传递选项。
        chainWebpack: config => {
            config.resolve.symlinks(true); // 修复热更新失效
            // 如果使用多页面打包,使用vue inspect --plugins查看html是否在结果数组中
            config.plugin("html").tap(args => {
                // 修复 Lazy loading routes Error
                args[0].chunksSortMode = "none";
                return args;
            });
            config.resolve.alias // 添加别名
                .set('@', resolve('src'))
                .set('@assets', resolve('src/assets'))
                .set('@components', resolve('src/components'))
                .set('@views', resolve('src/views'))
                .set('@store', resolve('src/store'));
            // 压缩图片
            // 需要 npm i -D image-webpack-loader
            config.module
                .rule("images")
                .use("image-webpack-loader")
                .loader("image-webpack-loader")
                .options({
                    mozjpeg: { progressive: true, quality: 65 },
                    optipng: { enabled: false },
                    pngquant: { quality: [0.65, 0.9], speed: 4 },
                    gifsicle: { interlaced: false },
                    webp: { quality: 75 }
                });
            // 打包分析
            // 打包之后自动生成一个名叫report.html文件(可忽视)
            if (IS_PROD) {
                config.plugin("webpack-report").use(BundleAnalyzerPlugin, [
                    {
                        analyzerMode: "static"
                    }
                ]);
            }
        },
        configureWebpack: config => {
            // 开启 gzip 压缩
            // 需要 npm i -D compression-webpack-plugin
            const plugins = [];
            if (IS_PROD) {
                plugins.push(
                    new CompressionWebpackPlugin({
                        filename: "[path].gz[query]",
                        algorithm: "gzip",
                        test: productionGzipExtensions,
                        threshold: 10240,
                        minRatio: 0.8
                    })
                );
            }
            config.plugins = [...config.plugins, ...plugins];
        },
        css: {
            extract: IS_PROD,
            requireModuleExtension: false,// 去掉文件名中的 .module
            loaderOptions: {
                    // 给 less-loader 传递 Less.js 相关选项
                    less: {
                        // `globalVars` 定义全局对象,可加入全局变量
                        globalVars: {
                            primary: '#333'
                        }
                    }
            }
        },
        devServer: {
                overlay: { // 让浏览器 overlay 同时显示警告和错误
                  warnings: true,
                  errors: true
                },
                host: "localhost",
                port: 8080, // 端口号
                https: false, // https:{type:Boolean}
                open: false, //配置自动启动浏览器
                hotOnly: true, // 热更新
                // proxy: 'http://localhost:8080'   // 配置跨域处理,只有一个代理
                proxy: { //配置多个跨域
                    "/api": {
                        target: "http://172.11.11.11:7071",
                        changeOrigin: true,
                        // ws: true,//websocket支持
                        secure: false,
                        pathRewrite: {
                            "^/api": "/"
                        }
                    },
                    "/api2": {
                        target: "http://172.12.12.12:2018",
                        changeOrigin: true,
                        //ws: true,//websocket支持
                        secure: false,
                        pathRewrite: {
                            "^/api2": "/"
                        }
                    },
                }
            }
    }
    
    

    结语

    上述代码可以直接复制,也可以按需引入,一般都用的到,注意里面需要安装的依赖。
    注意第三种方式:可能在安装以下依赖时,会报错,建议按以下顺序安装。

    npm install --save-dev  compression-webpack-plugin
    
    npm install --save-dev  image-webpack-loader 
    

    作者:Vam的金豆之路

    主要领域:前端开发

    我的微信:maomin9761

    微信公众号:前端历劫之路


    展开全文
  • Vue.js(一) Vue.js + element-ui 扫盲

    万次阅读 多人点赞 2018-12-09 20:32:59
    一:node.js是什么 我们知道javascript代码只能在浏览器上运行,只有浏览器能够解析js代码,如果想要javascript代码能够在服务器端运行就必须提供一个Javascript的运行环境(runtime environment),这就是node.js。 ...
    分享一个朋友的人工智能教程(请以“右键”->"在新标签页中打开连接”的方式访问)。比较通俗易懂,风趣幽默,感兴趣的朋友可以去看看。

    我之前写前端的时候就三个技术(html、js、css),现在的前端技术一般使用vue.js+element-ui, 一个后端程序员感觉再看现在的前端完全看不懂,js语法也不认识了,css语法也不认识了,html中也出现了不认识的标签。为了弄懂现在的前端是怎么玩的就研究了一下,本文是一个后端服务器码农对现在的大前端技术的扫盲,因不是专业前端,不保证所写的都是正确的,如有错误请指出。

    一:Vue.js技术栈

    • npm:node.js的包管理工具,用于同一管理我们前端项目中需要用到的包、插件、工具、命令等,便于开发和维护。
    • ES6:Javascript的新版本,ECMAScript6的简称。利用ES6我们可以简化我们的JS代码,同时利用其提供的强大功能来快速实现JS逻辑。
    • Babel:一款将ES6代码转化为浏览器兼容的ES5代码的插件
    • vue-cli:Vue的脚手架工具,用于自动生成Vue项目的目录及文件。
    • vue-router: Vue提供的前端路由工具,利用其我们实现页面的路由控制,局部刷新及按需加载,构建单页应用,实现前后端分离。
    • vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象。
    • webpack:一款强大的文件打包工具,可以将我们的前端项目文件同一打包压缩至js中,并且可以通过vue-loader等加载器实现语法转化与加载。

    二:node.js

    1. 简介

    我们知道javascript代码只能在浏览器上运行,只有浏览器能够解析js代码,如果想要javascript代码能够在服务器端运行就必须提供一个Javascript的运行环境(runtime environment),这就是node.js。

    node.js是对Chrome V8引擎进行了封装,是一个能让JavaScript运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。

    2. 运行一个helloworld.js

    # 查看node的版本
    $ node -v
    
    $ cat helloworld.js
    console.log("Hello Node.js");
    
    $ node helloworld.js
    Hello Node.js
    

    3. 运行一个简单的http服务

    3.1 index.js

    // 1、加载http模块
    var http = require('http');
    
    // 2、创建一个http服务对象
    var server = http.createServer();
    
    
    // 3、监听用户的请求事件(request事件)
    // 回调函数中有两个参数
    // request 对象 包含用户请求报文中所有内容,通过request对象可以获取所有用户提交过来的数据
    // response 对象 用来向用户响应一些数据,当服务器要向客户端响应数据的时候必须使用response对象
    server.on('request', function (req, res) {
      res.setHeader('Content-Type', 'text/html; charset=utf-8');
      var url = req.url;
      res.write('<h1> web http server <br/> request url :' + url + ' </h1>');
      // 对于每一个请求,服务器必须结束响应,否则,客户端(浏览器)会一直等待服务器响应结束
      res.end();
    });
     
    // 4、启动服务
    server.listen(8080, function () {
      console.log('服务器启动了,请访问:http://localhost:8080');
    });
    

    3.2 运行index.js

    $ node index.js
    

    3.3 在浏览器上访问http://localhost:8080

    在这里插入图片描述

    三:npm

    1. 简介

    在传统的前端开发中我们会经常引入jquery、bootstrap、echarts等js插件,我们首先去插件的每个官网去下载下来,然后放到自己前端工程中static/js目录下,我们每引用一个插件都要去官网下载,然后将下载的插件拖到工程中来,美国的一个程序员Isaac Z. Schlueter就做够了这种机械运动,想简化这个流程,于是做了这样一件事:

    1. 买了台服务器作为代码仓库(registry), 用于存放被共享的代码

    2. 发邮件分别通知各大JS插件作者(如jQuery的作者、bootstrap的作者、Vue的作者、element-ui的作者等等)让他们使用npm publish 命令将自己的JS插件提交到registry中

    3. 用户如果想使用某个JS插件可以先在package.json中配置一些需要安装的插件名称和对应的版本号(依赖dependency),然后通过npm install命令来下载它们,下载下来的插件自动放在node_modules目录下面

    在这里插入图片描述

    这套思想和maven是完全一样的,熟悉maven或者gradle的也就自然理解npm了,只不过npm用于js,maven用于java,都是作者先将共享的代码放到某个公共的代码仓库,用户先在配置文件中配置好要使用的依赖,然后通过一个命令就能下载下来。

    仓库 npm maven
    代码仓库 registry repository
    仓库地址 http://registry.npmjs.org https://mvnrepository.com
    taobao镜像 https://registry.npm.taobao.org http://maven.aliyun.com/nexus/content/groups/public
    配置文件 package.json
    “dependencies”: {“vue”: “^2.5.13”}
    pom.xml
    <dependencies>
    <dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.6</version>
    </dependency>
    <dependencies>
    软件 npm(node package manager) apache-maven
    下载命令 npm install mvn install
    打包生成的目录 dist target

    npm: Node Package Manager, 一种用Node.js开发的工具用于发布插件到仓库和从插件仓库中下载插件的工具,一种用于共享JS代码的工具。

    2. 如何安装npm

    由于node.js当时也缺少一个包管理器,npm也是使用node.js开发的,这个工具使用的人较少,后来node.js的作者和npm的作者沟通一下将npm作为node.js包管理器,内置到node.js中,后来由于node.js大火,npm使用的人也越来越多,越来越多的JS插件通过npm被共享,现在几乎常用的插件都能在npm中找到,现在的npm已经发展成为前端共享代码的标准了。因为npm已经内置于node.js当中了,所以安装了node.js也就安装了npm, 可以通过node -v 和 npm -v 分别查看对应的版本。

    3. 如何生成package.json文件

    npm init : 用于生成一个基础的package.json文件,里面包含名称、版本号、描述、主文件、作者、协议等
    package.json

    {
      "name": "platform-webapp",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }
    

    四:webpack

    1. 简介

    传统的前端一般会html、javascript、css这三样东西就够了。现代的前端发展迅猛,引入了TypeScript、SCSS、LESS、stylus(CSS预处理器)等技术,提供了更丰富的特性,提高了开发效率,但是引入的这些技术不能直接被浏览器解析,需要一个东西将浏览器不能解析的代码翻译成浏览器可以直接解析代码,这就是webpack的作用。

    • TypeScript是JavaScript类型的超集(简单的说就是对JavaScript的封装),提供更加丰富的特性(在JavaScript上添加了可选的静态类型和基于类的面向对象编程),而且可以编译成纯JavaScript

    • ECMAScript:ECMAScript是标准,JavaScript是ECMAScript的实现,ECMAScript也在快速发展,引入了更多的语法新特性等。其中ECMAScript6使用较多,现在ECMAScript8已经发布了。

    • SCSS: SCSS即是SASS的新语法,是Sassy CSS的简写,是CSS3语法的超集,也就是说所有有效的CSS3样式也同样适合于SASS。SASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。

    • less: Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

    • stylus:文件后缀是. styl 的这个哥们儿学名叫 stylus,是 CSS 的预处理框架。stylus 给 CSS 添加了可编程的特性,也就是说,在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件,执行这一套骚操作之后,这个文件可编译成 CSS 文件。

    webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(TypeScript、SCSS等),并将其打包为合适的格式以供浏览器直接使用。随着webpack的发展,webpack支持ECMAScript6、ECMAScript7、ECMAScript8等。随着webpack的发展,webpack不仅仅用来编译(翻译)代码,也集成了更多的功能,比如:

    • 热加载:修改了代码然后保存,浏览器会自动刷新
    • 压缩文件:压缩图片,字体, 脚本文件等
    • 插件(plugin):webpack打包时可以执行某个插件,控制webpack打包时的某个过程,这种插件机制和maven中的插件原理完全一样

    webpack最终发展成为:前端项目的构建工具。

    模块(module)化就是把复杂的应用程序细分为较小的文件,在webpack中一切都是模块,js、css、图片、字体等待都可称为模块。

    在这里插入图片描述

    webpack文档

    2. webpack安装

    webpack可以通过npm安装,安装后会生成一个node_modules目录

    # npm初始化,直接回车即可,生成package.json文件
    npm init
    
    # npm全局(global)安装
    npm install -g webpack 
    
    # 切换到项目根目录,安装到你的项目目录中, 生成node_modules目录和package-lock.json文件
    # 注意:全局安装的作用是可以在命令行中直接使用命令,效果类似于环境变量的作用
    # 全局安装后,仍然需要在自己的项目中再次安装
    # --save-dev 将依赖保存到package.json中的devDependencies中
    # --save 将依赖保存到package.json中的dependencies中
    npm install --save-dev webpack
    
    # webpack 打包命令
    webpack <源文件> -o <目标文件>
    
    webpack src/index.js -o dist/index.bundle.js
    
    # 如果报错Error: Cannot find module 'webpack-cli',执行下面命令
    npm install webpack-cli -g
    

    3. webpack中的重要功能

    3.1 devtool

    devtool: “eval-source-map” webpack打包后的文件可读性非常低,不利于调试,使用devtool可以生成对应的源码便于调试。使用eval打包源文件模块,在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项,在生产阶段则一定不要启用这个选项;

    3.2 webpack-dev-server

    webpack-dev-server 是一个本地开发服务器,居于node.js实现的,使用npm run dev 后就可以使用默认的8080端口在浏览器上访问了,类似于apache的功能

    3.3 loaders

    loader可以让webpack有能力调用外部的脚本或工具,实现对不同格式的文件的处理,比如说分析转换scss为css,或者把下一代的JS文件(ES6,ES7)转换为现代浏览器兼容的JS文件

    css-loader 和 style-loader 就是用来处理样式的。

    3.4 babel(很重要)

    Babel其实是一个编译JavaScript的平台,它可以编译代码帮你达到以下目的:

    • 让你能使用最新的JavaScript代码(ES6,ES7等待),而不用管新标准是否被当前使用的浏览器完全支持;
    • 让你能使用基于JavaScript进行了拓展的语言,比如React的JSX;

    3.5 plugins

    插件(Plugins)是用来拓展Webpack功能的,它们会在整个构建过程中生效,执行相关的任务。

    Loaders和Plugins常常被弄混,但是他们其实是完全不同的东西,可以这么来说,loaders是在打包构建过程中用来处理源文件的(JSX,Scss,Less…),一次处理一个,插件并不直接操作单个文件,它直接对整个构建过程其作用。

    Webpack有很多内置插件,同时也有很多第三方插件,可以让我们完成更加丰富的功能。

    常用的插件:

    • HtmlWebpackPlugin
    • Hot Module Replacement(HMR) 热加载:允许你在修改组件代码后,自动刷新实时预览修改后的效果
    • clean-webpack-plugin 去除build文件中的残余文件
    • OccurenceOrderPlugin :为组件分配ID,通过这个插件webpack可以分析和优先考虑使用最多的模块,并为它们分配最小的ID
    • UglifyJsPlugin: 压缩JS代码
    • ExtractTextPlugin:分离CSS和JS文件

    3.6 webpack配置文件

    在这里插入图片描述

    • 如果与输入相关的需求,找entry(比如多页面就有多个入口)
    • 如果与输出相关的需求,找output(比如你需要定义输出文件的路径、名字等等)
    • 如果与模块寻址相关的需求,找resolve(比如定义别名alias)
    • 如果与转译相关的需求,找loader(比如处理sass处理es678N)
    • 如果与构建流程相关的需求,找plugin(比如我需要在打包完成后,将打包好的文件复制到某个目录,然后提交到git上)

    五:vue.js是什么

    5.1 简介

    • 它是一个轻量级的MVVM框架。
    • 使用 数据驱动+组件化 来开。
    • 数据双向绑定(当修改视图时数据也会赋值给model,当更改model的时候也会反应到视图上)。

    页面上每个独立的可视或者可交互的区域均视为一个组件,每个组件对应一个工程目录(文件夹),组件所需要的各种资源尽可能的都放在这个目录下就近维护(即将模板、样式、js等都写在一个.vue文件中),组件可以嵌套自由组合,形成完整的页面。

    在这里插入图片描述

    5.2 vue脚手架初始化项目

    # 1.安装vue-cli脚手架(用于初始化项目)
    $ npm install -g vue-cli
    
    $ 2. 创建项目
    $ vue init webpack <project name>
    
    # 3. 安装cnpm(此步骤不是必须的)
    # 有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所以还需要npm的国内镜像—cnpm
    npm install -g cnpm –registry=http://registry.npm.taobao.org
    
    # 4. 安装依赖包
    $ cd <project name>
    # cnpm 需要单独安装,如果没有cnpm可以使用npm来代替
    $ cnpm install
    
    # 5. 启动程序就可以在浏览器访问
    $ npm run dev
    
    # 6. 在浏览器访问localhost:8080
    

    5.3 脚手架目录结构

    在这里插入图片描述

    • build : webpack相关的配置
    • config:webpack相关的配置,index.js中可以配置服务的端口,默认是8080, useEslint默认是true,当启动检查代码格式时可以设置为false
    • node_module : npm install安装的依赖代码库
    • src : 源码文件,开发都会在该目录下进行
      • assets: 存放一些静态资源
      • components:组件,存放.vue文件,每个组件分为三部分:template、script、style
      • router:路由,配置url路径对应的组件
      • App.vue
      • main.js :entry入口文件
    • static : 存放一些静态资源
    • test:单元测试相关
    • .babelrc: babel编译的相关配置
    • .editorconfig : 编辑器相关的配置(比如字符集、缩进的空格等)
    • .eslintignore : 配置需要或略的路径,一般build、config、dist、test等目录都会配置忽略
    • .eslintrc.js : 配置代码格式风格检查规则, 如每行代码是否强制使用分号; 代码缩进是使用空格还是tab等,在启动工程的时候会进行严格的检查,如果不满足格式就会启动失败,主要是让所有开发人员保持强一致的开发风格。主要是extends: [“standard”]、rules等配置。
    • .gitignore : git或略的文件
    • index.html : 入口文件,编译时会将其它代码插入到index.html中
    • package.json : 项目的配置文件,scripts用于配置的脚本,其中dev和build非常常用,启动项目就是使用npm run dev命令,这里的dev就是scripts中的dev, npm start就是对npm run dev的简写;devDependencies用于编译时的依赖,开发时需要,上线时用不到;
      在这里插入图片描述

    5.4 基本流程

    1. 在控制台中输入npm run dev,然后在浏览器上访问http://localhost:8080/#/helloworld
    2. 通过router/index.js配置好的/helloworld路径(path)找到对应的组件(component) HelloWorld.vue
    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/helloworld',
          name: 'HelloWorld',
          component: HelloWorld
        }
      ]
    })
    
    1. HelloWorld.vue 就是要访问的内容
    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'HelloWorld.vue'
        }
      }
    }
    </script>
    
    <!-- style 标签省略了 -->
    
    1. HelloWorld.vue的内容将会替换到App.vue中<router-view/>
    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <!-- style 标签省略了 -->
    
    1. App.vue的内容将会注入到index.html中的body标签里
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>platform-webapp</title>
      </head>
      <body>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>
    
    1. 最终的效果如图
      在这里插入图片描述

    六:集成Element

    6.1 安装element-ui

    # 切换到项目根目录
    $ cd <project root dir>
    # 安装element-ui, 安装后package.json中dependencies就会增加element-ui依赖
    $ cnpm i element-ui -S 
    

    6.2 在main.js中配置element-ui

    在main.js中增加导入和让Vue使用ElementUI

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    // 导入element-ui
    import ElementUI from 'element-ui'
    
    Vue.config.productionTip = false
    
    // Vue使用ElementUI
    Vue.use(ElementUI)
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    

    6.3 安装依赖

    cnpm install

    6.4 使用element-ui

    HelloWorld.vue

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <el-button type="primary">主要按钮</el-button>
        <el-input-number v-model="num" :min="1" :max="10" @change="handleChange"></el-input-number>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'HelloWorld.vue',
          num: 5
        }
      },
      methods: {
        handleChange(value) {
          console.log(value)
        }
      }
    }
    </script>
    
    <!-- 样式省略 -->
    

    6.5 重新启动,访问

    npm run dev

    在这里插入图片描述

    分享一个朋友的人工智能教程(请以“右键”->"在新标签页中打开连接”的方式访问)。比较通俗易懂,风趣幽默,感兴趣的朋友可以去看看。

    七:参考文章

    入门Webpack,看这篇就够了 https://www.jianshu.com/p/42e11515c10f
    搭建vscode+vue环境 https://blog.csdn.net/mao834099514/article/details/79138484

    展开全文
  • vue.js 三种方式安装(vue-cli)

    万次阅读 多人点赞 2018-05-29 07:49:05
    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API... 下面介绍三种 Vue.js安装方法: 1.独立版本 我们可以在Vue.js的官网上直接下载vue...

           Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。

           下面介绍三种 Vue.js 的安装方法:

            1.独立版本

           我们可以在Vue.js的官网上直接下载vue.js,并在.html中通过<script>标签中引用。->  <script src = ../vue.js> </script>  开发环境不要使用最小压缩版,不然会没有错误提示和警告!(页面中直接使用)

    使用vue多页面开发:

    1. 引入vue.js
    2. 创建一个vue根实例  new Vue({选项})

            2.使用CDN方法

         3.NPM方法(推荐使用)

          在用Vue.js构建大型应用的时候推荐使用NPM安装方法,NPM能很好的和诸如Webpack或者Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

         首先,先列出我们接下来需要的东西:

    • node.js环境(npm包管理器)
    • vue-cli 脚手架构建工具
    • cnpm npm的淘宝镜像      

           1) 安装node.js

                从node.js官网下载并安装node,安装过程很简单,一直点下一步就ok了,安装完之后,我们通过打开命令行工具(win+R),输入

            node -v 命令,查看node的版本,若出现相应的版本号,则说明你安装成功了。

                  

                 npm包管理器,是集成在node中的,所以安装了node也就有了npm,直接输入 npm -v 命令,显示npm的版本信息。

                  

            到目前为止,node的环境已经安装完成,npm 包管理器也有了,由于有些npm资源被屏蔽或者是国外资源的原因,经常会导致npm安装依赖包的时候失败,所以我们还需要npm的国内镜像----cnpm.

         2) 安装cnpm

               在命令行中输入  npm install -g cnpm --registry=http://registry.npm.taobao.org  ,然后等待,没报错表示安装成功,(我的已经安装过了,显示更新成功的信息),如下图:

                

           完成之后,我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的,查看淘宝npm镜像官网。

     

          3) 安装vue-cli 脚手架构建工具(必须在全局中进行安装)

               在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。

               是否安装成功:vue -V

                通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。

     

            首先我们要选择存放项目的位置,然后再用命令行cd到项目的目录中,在这里,我选择在c盘下创建新的目录(NodeTest 目录),用cd 将目录切到该目录下,如下图:

             

    在NodeTest 目录下,在命令行中运行命令 vue init webpack firstApp(初始化一个完整版的项目) 。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstApp是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在NodeTest 目录生成该文件夹),如下图:

    若我们在编辑器中已经手动创建了这个项目存放的文件夹cd到项目中:vue init webpack;初始化一下即可,同时还会加载webpack所依赖的包:

    是否是在本目录下进行创建

            

    输入命令后,会询问我们几个简单的选项,我们根据自己的需要进行填写就可以了。

    • Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写,所以我把名称改成了vueclitest
    • Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。
    • Author:作者,如果你有配置git的作者,他会读取。
    • Install  vue-router? 是否安装vue的路由插件,我们这里需要安装,所以选择Y
    • Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n(建议),如果你是大型团队开发,最好是进行配置。
    • setup unit tests with  Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我们这里不需要,所以输入n。
    • Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我们这里不需要,所以输入n

        运行初始化命令的时候会让用户输入几个基本的配置选项,如项目名称、项目描述、作者信息,对于有些不明白或者不想填的信息可以一直按回车去填写就好了,等待一会,就会显示创建项目创建成功,如下图:

         

     接下来,我们去NoteTest目录下去看是否已创建文件:

          

      打开firstApp 项目,项目中的目录如下:

          

        介绍一下目录及其作用:

         build:最终发布的代码的存放位置。

         config:配置路径、端口号等一些信息,我们刚开始学习的时候选择默认配置。

         node_modules:npm 加载的项目所需要的各种依赖模块。

         src:这里是我们开发的主要目录(源码),基本上要做的事情都在这个目录里面,里面包含了几个目录及文件:

                 assets:放置一些图片,如logo等

                 components:目录里放的是一个个的组件文件

                 router/index.js:配置路由的地方

                 App.vue:项目入口组件(跟组件),我们也可以将组件写这里,而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染,这里面的<router-view/>必不可少。

                 main.js :项目的核心文件(整个项目的入口js)引入依赖包、默认页面样式等(项目运行后会在index.html中形成一个app.js文件)。

         static:静态资源目录,如图片、字体等。

         test:初始测试目录,可删除

          .XXXX文件:配置文件。

         index.html:html单页面的入口页面,可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。

         package.json:项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。

         README.md:项目的说明文件。

         webpack.config.js:webpack的配置文件,把.vue的文件打包成浏览器能读懂的文件。

         .babelrc:是检测es6语法的文件的配置

         .getignore:忽略文件的配置(比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置)

         .postcssrc.js:前缀的配置 

         .eslintrc.js:配置eslint语法规则(在这里面的rules属性中配置让哪个语法规则失效)

         .eslintignore:忽略eslint对项目某些文件的语法规则的检查

     

        这就是整个项目的目录结构,其中,我们主要在src目录中做修改(模块化开发)。这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装。

        cd  项目名;进入项目中

        安装项目所需要的依赖包/插件(在package.json可查看):执行 cnpm install   (npm可能会有警告,这里可以用cnpm代替npm了,运行别人的代码需要先安装依赖)如果创建项目的时候没有报错,这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install

    若拿到别人的项目或从gethub上下载的项目第一步就是要在项目中cnpm install;下载项目所依赖的插件,然后npm run dev 运行项目

        

        安装完成之后,我们到自己的项目中去看,会多一个node_modules文件夹,这里面就是我们所需要的依赖包资源。

        

     安装完依赖包资源后,我们就可以运行整个项目了。

        

       运行项目

        在项目目录中,运行命令 npm run dev (npm run start),会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

        

        项目启动后,在浏览器中输入项目启动后的地址:

      

        在浏览器中会出现vue的logo:

         

    至此,vue的三种安装方式已介绍完毕。

     

    项目完成后输入打包命令:cnpm run build;会生成一个dist文件,就是我们的打包文件,点击.html文件能运行则成功。

    一、搭建vue的开发环境(大纲)

    1. 必须安装node.js
    2. 搭建vue的开发环境,安装vue的脚手架工具    官方命令行工具

    npm install - -global vue-cli

         3.创建项目   必须cd到对应的一个项目里面

    vue init webpack vue-demo01

    cd  vue-demo01

    cnpm install   /  npm install          如果创建项目的时候没有报错,这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install 

    npm run dev/npm run start

         4.另一种创建项目的方式中小型项目   (推荐)  ***

    vue init webpack-simple vuedemo02

    cd  vuedemo02       

    cnpm install   /  npm install           

    npm run dev

     

    拿到别人的项目不能正常运行后看有没有node_modules这个文件(项目所有的依赖),若没有cd到项目中安装项目的依赖:cnpm install/npm install

     

    二、升级:vue-cli3.0

    一、使用vue-cli3.0

    1. Vue CLI的包名称由vue-cli改成了@vue/cli
    2. 如果你已经全局安装了旧版本的vue-cli(3.0以下),你需要先通过npm uninstall vue-cli -g/yarn global remove vue-cli卸载它。
    3. Node.js8.9+
    4. 安装vue3.0     npm install -g @vue/cli  或者 yarn global add @vue/cli
    5. 版本是否是3.x    vue --version/vue -V
    • 通过vue-cli创建项目
    1. 创建项目命令

    vue create 项目名;   项目名不建议存在大写,中间用-隔开

    这时候需要注意创建项目需要预先安装的插件:

    默认的会有Babel + ESLint;但是不建议默认,选择下面:

    ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    >( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
    ( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人再用
    ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
    ( ) Router // vue-router(vue路由)
    ( ) Vuex // vuex(vue的状态管理模式)
    ( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
    ( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
    ( ) Unit Testing // 单元测试(unit tests)
    ( ) E2E Testing // e2e(end to end) 测试 

    等待项目初始化完成。。。。。。

    1.cd 到项目里

    2.npm run serve   运行项目

     

    或者使用图形化界面创建项目:

    vue ui

     

     

    看了那么多的vue.js的安装方式总结一下。如有不多请多多指教!希望给您带来帮助!

    参考文献:https://blog.csdn.net/m0_37479246/article/details/78836686

    展开全文
  • 关于vue.js的学习官方文档里有教程 https://cn.vuejs.org/v2/guide/ 赞一下vue.js的维护人员,我会按照官方的API里整合的目录分模块进行学习 本章内容是有关vue的数据处理,主要介绍data,computed,method,watch,...
  • 解决了chrome浏览器更新后安装插件的问题,还没来得及高兴,我就发现我家刚装的小图标都不带亮一下的! 我的: 人家的:   真的是,哇的一声哭出来!!!   那么问题到底在哪里呢??看了几篇大佬写的解决...
  • 详细讲解如何使用 Vue CLI 搭建前端项目以及项目结构分析。
  • Vue.js中对css的操作

    万次阅读 2020-06-17 01:08:32
    此篇博客为转载内容,做个记录,方便自己日后查找使用 总结下面的内容,最简单的方式是给需要操作的dom元素添加ref="refName"属性, 然后通过this.$refs.refName.style.要修改的样式=修改的值 即可完成修改css ...
  • 刚开始使用vue.js devtool时,使用的是从http://www.cnplugins.com/devtool/vuejs-devtools/detail.html上面找的crx文件,直接拖动到谷歌浏览器的扩展程序中安装的,但是 一直是灰色的,找了很多方法,包括根据这个...
  • vue.js介绍及vue.js优缺点

    万次阅读 2018-10-25 20:53:18
    什么是vue.js Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或...
  • vue.js 和 vue.min.js 文件

    千次阅读 2018-07-17 15:10:45
    https://download.csdn.net/download/qq_36688143/10546461
  • 安装Vue.js脚手架 vue-cli

    千次阅读 2017-11-30 16:30:17
    1.首先来到Vue.js的gthub页面 点击Vue-ci https://github.com/vuejs/vue https://github.com/vuejs/vue-cli 照着readme一路敲就好 tinghou$ vue init webpack vuetestdemo ? Project name vuetest
  • Vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js的环境的,所以首先要安装node.js。(官方地址:https://nodejs.org/en/download/) 注意:安装完node之后,npm包含的很多依赖包是部署在国外的,...
  • 认识Vue.js+Vue.js的优缺点+和与其他前端框架的区别

    万次阅读 多人点赞 2016-11-05 10:42:50
    首先,我们先了解什么是MVX框架模式?MVX框架模式:MVC+MVP+MVVM1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。View通过Controller来和Model联系,Controller是View...
  • 策划列表相关的vue.js可畏的事 资源 官方资源外部资源工作门户社区会议播客官方的例子教程实例书 项目采用vue.js 开源商业产品应用/网站互动体验企业使用 组件&图书馆 用户界面组件 表通知...
  • vue.js视频教程,vue.js视频教程下载

    万次阅读 多人点赞 2016-09-14 23:13:45
    最近这几年的前端圈子,由于戏台一般精彩纷呈,从 MVC 到 MVVM,你刚唱罢我登场。 backbone,angularjs 已成昨日黄花,reactjs ...关于vue.js我就不多废话了,大家可查阅官方文档。对于基础相对薄弱或者不想花太
  • A curated list of awesome things related to Vue.js Resources Official ResourcesExternal ResourcesJob PortalCommunityConferencesPodcastsOfficial ExamplesTutorialsExamplesBooks Projects Using V
  • vue.js资源汇总,vue.js教程大全

    万次阅读 2016-09-13 08:18:35
    Vue.js 的一些资源索引 vue资料入门类 vue 快速入门 Vue.js 中文系列视频教程 on Laravist英文教程 Learning Vue 1.0: Step By Step社区 sf - vue标签 知乎 - vue标签 Vue.js专业中文社区 vue - issues二. ...
  • 正好近日看完了Vue各个插件的文档,就用着Vue尝试写了这个简约的博客内容管理器(CMS)。完成的功能 一个基本的博客内容管理器功能,如后台登陆,发布并管理文章等 支持markdown语法编辑 支持代码高亮 可以管理博客...
  • 整合springboot+vue.js--安装vue.js

    千次阅读 2019-04-29 20:52:32
    业余时间想整理一个基于springboot2.x+mybatis+redis(二级缓存)+vue.js的小系统,随着工作经验的增加慢慢去完善它 废话不多说,安排一个node.js,回归最老版的命令行编码! vue.js是什么?为什么要使用它? Vue.js...

空空如也

1 2 3 4 5 ... 20
收藏数 121,378
精华内容 48,551
关键字:

vuejs安装

vue 订阅