最近几天项目上使用了vue.js作为一个主要的开发框架，并且为了发布的方便搭配了webpack一起使用。CSS框架使用的是vue-strap(vue 对bootstrap控件做了封装)
这篇文章主要总结一下具体搭建的过程，和途中遇到的一些问题的解决办法

主要用到的工具

搭建步骤

1. 首先建立项目的目录结构

  • demo_project/

    • dist/ webpack生成的文件
    • src/ 源代码文件
      • img/ 图片文件
      • css/ css文件
      • js/ js文件
      • components/ 定义的vue组件
      • views/ 视图文件，其实也是vue组件
    • webpack.config.js webpack配置文件

2. 安装vue 和webpack

# 进入到 demo_project 目录下
  npm install vue --save
  npm install webpack --save

3. 添加webpack配置文件

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: 'style!css'
        }]
    }
}

4. 添加package.json文件

# cd 到 demo_project 目录下
npm init #跟着步骤一步一步的完成

最后生成的package.json文件如下

{
  "name": "vuedemo",
  "version": "1.0.0",
  "description": "a vue demo with webpack",
  "main": "webpack.config.js",
  "dependencies": {
    "vue": "^1.0.4",
    "webpack": "^1.12.2"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"webpack --color  --progress"
    //注意，这是我生成后加上的。用于执行webpack.如果webpack 安装在全局可以直接行动webpack进行打包
  },
  "author": "frank"
}

5. 新增html和js入口文件

<!-- src/index.html -->
<html>
<head>
    <meta charset="utf-8">
</head>

<body>
    <script type="text/javascript" src="../dist/bundle.js"></script>
</body>
 
/* src/index.js  */
document.write('hello. webpack runs ok!')

6. 验证webpack是否成功

npm start

在浏览器中打开index.html .看到hello. webpack runs ok! 表示webpack成功了运行了

后面就是使用vue的loader加载的vue文件了.下次再写
接着来安装 vue-loader

7.安装vue-loader

  • 安装

    npm install vue-loader --save

  • 修改配置文件

    //webpack.config.js
    loaders[
            ...
        {
                test:/\.vue$/,
                loader:'vue'
        }
            ...

  • 在views目录下创建测试的vue文件

    <!-- hello.vue -->
    <template>
        <strong>{{vueMsg}}</strong>
    </template>
    <script>
    module.exports = {
        data() {
          return {vueMsg:'Vue hello world'}
        }
    }
    </script>
    <style scoped>
      strong{

  }
    </style>

  • 在index.js文件中引入vue

    //index.js
    var Vue = require('vue')
    var helloVue = require('./views/hello.vue')
     new Vue({
        el: "body",
        components: {
            hello: helloVue
        }
    })

  • 修改index.html加入body中加入demo的vue节点

    ...
    <body>
      <hello></hello>
      ...
    </body>
    ...

8.测试vue

#根目录执行
npm start

打开index.html，看到红色背景的Vue hello world

使用webpack搭建vue开发环境的更多相关文章

  1. 使用vue-cli+webpack搭建vue开发环境

    在这里我真的很开心,好久没有用过博客,今天突然看到了我的博客有不少人看过,虽然没有留下脚印,但是还是激起了我重新拿起博客的信心,感谢大家. 在这里我们需要首先下载node,因为我们要用到npm包下载, ...

  2. 1 使用webpack搭建vue开发环境

    1 先去node.js官网下载nodejs并且安装 安装成功之后在命令行输入node -v 回车,npm -v回车如果显示对应的版本号,说明node安装成功,自带的npm也安装成功 2 在d盘下创建一 ...

  3. 从零开始使用 Webpack 搭建 Vue 开发环境

    创建项目 先创建一个空目录,在该目录打开命令行,执行 npm init 命令创建一个项目(无法执行 npm 命令?需要先安装 Node),这个过程会提示输入一些内容,随意输入就行,完成后会自动生成一个 ...

  4. 基于 Webpack 4 搭建 Vue 开发环境

    自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpa ...

  5. 初探webpack之从零搭建Vue开发环境

    初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...

  6. 【原创】windows下搭建vue开发环境+IIS部署

    [原创]win10下搭建vue开发环境  如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:     详细的安 ...

  7. windows下搭建vue开发环境+IIS部署

    原创]win10下搭建vue开发环境  https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...

  8. 十分钟上手-搭建vue开发环境（新手教程）

    想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记录的是五分钟搭建 ...

  9. 1.WIN10下搭建vue开发环境

    WIN10下搭建vue开发环境 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. ...

随机推荐

  1. Android Paint类方法说明

    * Paint类介绍 * * Paint即画笔,在绘图过程中起到了极其重要的作用,画笔主要保存了颜色, * 样式等绘制信息,指定了如何绘制文本和图形,画笔对象有很多设置方法, * 大体上可以分为两类, ...

  2. js中json对象和字符串的转换

    JSON.parse() : 字符串-->json对象 var str = '{"name":"huangxiaojian","age" ...

  3. Can't load AMD 64-bit .dll on a IA 32-bit platform

    主要谈谈在win8.1(64bit)下搭建环境的经历. 安装win8.1(64bit)后,配置java环境是费了我一番心思的,所以想记录下来,成为经验.64位系统下比较理想的配置应该是 64位jdk ...

  4. （一）半小时开发一个APP

    [前言] HPP是什么? HybirdApp的简称,详细介绍参见:HPP--让所有中小企业拥有自己的APP 说白了就是用html+css+js开发app,包括ios和android版本. HBuild ...

  5. Web报表页面如何传递中文参数

    1.场景描述 在用报表开发工具FineReport设计的web报表中,给iframe设置src嵌入某个报表时,往往会给报表传递初始的参数值,例如: <iframe id="report ...

  6. java设计模式之装饰模式

    发现设计模式的学习越来越让自己学习的东西太少了,应该多接触一些东西,多出去走一走. 装饰模式概念: 动态地给一个对象添加一些额外的职责,就增加功能来说,装饰模式比生成子类更为灵活(大话设计模式) 在不 ...

  7. Java Web之会话技术

    客户端与服务器通信过程中,会产生一些数据.比如,A和B分别登陆了某宝购物网站,A买了一个Android手机,B买了一个iPhone手机,当结账时,web服务器需要分别对用户A和B的信息分别保存.根据J ...

  8. NOIP2000单词接龙[DFS]

    题目描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的“龙”(每个单词都最多在“龙”中出现两次),在两个单词相连时,其重合 ...

  9. Channel SDK (渠道SDK) for Unity

    渠道 英文channel,解释:商品的销售路线,也就是我们开发商(CP)都把游戏开发好了,交付给渠道帮我们运营,帮我们推广,帮我们赚钱. Android和IOS渠道 拿安卓和IOS两大平台来说,它们都 ...

  10. 叫板OpenStack:用Docker实现私有云

    看到各大厂商的云主机,会不会觉得高大上?目前大公司的主流方案是OpenStack,比如某个公司的私有云