如何利用webpack搭建vue环境

summerpxy 发布于2019-08-21 17:35 / 1188人阅读

摘要：环境介绍系统版本版本搭建过程新建一个新的文件夹，进入文件夹，命令行中输入必要的信息安装注可采用淘宝源，可以安装一个工具，这个工具可用于切换包的获取地址，具体非本文主要内容利用安装以备使用在项目目录下新建一个文件，内容代码如下，官

环境介绍

系统：macOSHigh Sierra 10.13
node版本：v8.4.0
npm版本：5.3.0

搭建过程

新建一个新的文件夹，进入文件夹，命令行中npm init,输入必要的信息

安装webpack npm install webpack --save-dev(注：可采用淘宝源，可以安装一个nrm工具，这个工具可用于切换npm包的获取地址，具体非本文主要内容)

利用npm install --save-dev path安装path以备使用

在项目目录下新建一个文件，webpack.config.js,内容代码如下，官网直接拿过来的

    var path = require("path");
    module.exports = {
        entry: "./app/index.js",
            output: {
            filename: "index.js",
            path: path.resolve(__dirname, "dist")
        }
    };

有了上面这些，按照官网就可以来进行编译了，具体请查看官网，那么如何来进行vue项目的构建呢，请继续往下看。

首先要安装vue为了编译*.vue文件，我们还需要vue-template-compiler，还需要vue-loader来加载vue

安装完成之后，新建目录结构如图

其中，代码如下
Examples.vue

index.js

import Vue from "vue";
import Examples from "./template/Examples.vue";

new Vue({
    el: "#app",
    components: {
        "Examples": Examples
    }
});

index.html

然后进行项目[请见github示例]编译，打开浏览器，发现控制台，报了如下错误

[Vue warn]: You are using the runtime-only build of Vue where the
template compiler is not available. Either pre-compile the templates
into render functions, or use the compiler-included build.

(found in )

看npm包中的vue的package.json可以知道，main的指向dist/vue.runtime.common.js 为了解决这个问题，只要我们在webpack.config.js中加上这个即可

resolve: {
    alias: {
        vue: "vue/dist/vue.js" // 注意此处为坑
    }
}

此时在再加载页面发现

[Vue warn]: Do not mount Vue to  or  - mount to normal
elements instead.

其实是vue不允许在body上操作，因而我将id="app"放到了div上,此时一个vue项目基本搭建完成

有些朋友可能很喜欢css in js，当你写某些组件时，将css放在组件当中，它的可移植性非常高，示例如下，在Examples.vue中添加

但是仅仅这样无法进行成功编译的，我们还需要loader来对这些样式进行编译，我们需要style-loader将style标签注入到页面当中，同时需要css-loader来加提取css,npm install --save-dev style-loader并在webpack.config.js中module中rules添加规则，css-loader同理,(注：use中是从右到左执行)

{test: /.css/, use: "style-loader!css-loader"}

此时再编译即可，为了便于使用，可以再package.json中添加build命令，则可以用npm run build来进行编译，如下，将build写在这个位置

"scripts": {
    "build": "webpack --watch", // 就是这句，这样可以热更新
    "test": "echo "Error: no test specified" && exit 1" //这句是默认的，不用管
}

12.看起来是完了，是如果要引入一张背景图片呢，看看会出现什么问题,发现编译不通过，所以需要url-loader来进行url解析，同理10的安装方法，效果再一次实现

结语

如果再遇到什么报错，请看是不是还需要什么loader,利用webpack搭建vue基本就说到这了，示例地址：https://github.com/IhInspirat...,写的如有错误或不完整之处，请评论交流，谢谢！

混合云云服务器如何搭建java开发环境服务器如何搭建环境 webpack搭建如何在云服务器上搭建环境

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89714.html

手把手教你用es6+vue2+webpack2+vue-router2搭建个人blog

摘要：更新日志更新完成静态页面原型修复使用的正确姿势更新添加静态页面更新添加使用方法请戳我主要作用就是在你开发环节在后端同学还未开发完成的情况下，提供一个。底下评论说是标题党，或者是光扔个github地址上来的同学我就不说什么了。你们有看看仓库的提交记录么？我还没有吃撑到开个仓库去骗star.我的出发点就是每天更新一部分代码，教大家用我所提到的技术栈搭建一个blog，我的出发点就是这么简单...

weapon 2019-08-20 14:15 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
vue项目前端错误收集之sentry

摘要：我创建了一个名为的项目。错误信息查看在后台找到我们的项目，点击进去就能看到多了一条错误信息。它由以下几部分组成，分别是协议公钥私钥主机路径一般为空项目。 sentry简介 Sentry 是一个开源的错误追踪工具，可以帮助开发人员实时监控和修复系统中的错误。其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言(JS/Java/Python/php)和平台, 并提供了w...

RaoMeng 2019-08-26 13:57 评论0 收藏0