最近几天项目上使用了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. Java文件选择对话框（文件选择器JFileChooser）的使用：以一个文件加密器为例

    文件加密器,操作过程肯定涉及到文件选择器的使用,所以这里以文件加密器为例.下例为我自己写的一个文件加密器,没什么特别的加密算法,只为演示文件选择器JFileChooser的使用. 加密器界面如图: 项 ...

  2. jmeter 性能测试工具的使用（Web性能测试）

    1.下载 http://pan.baidu.com/s/1o7p18Ye 该软件不用安装,直接解压打开即可使用. 2.使用 这里就在win下进行,图形界面较为方便 在目录apache-jmeter-2 ...

  3. linux shell 之 crontab（定时任务）详解

    1.定义: crontab命令常见于Unix和类Unix的操作系统之中,用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并将其存放于“crontab”文件中,以供之后读取和执行.该词来源于希 ...

  4. emacs 新手笔记（一） —— 阅读【emacs tutorial】

    ilocker:关注 Android 安全(新入行,0基础) QQ: 2597294287 [emacs tutorial]是熟悉 emacs 的入门资料.一共几十个命令,不需硬记,勤练即可. 翻页命 ...

  5. monkeyrunner之eclipse中运行monkeyrunner脚本之环境搭建（四）

    monkeyrunner脚本使用Python语法编写,但它实际上是通过Jython来解释执行. Jython是Python的Java实现,它将Python代码解释成Java虚拟机上的字节码并执行,这种 ...

  6. HTTP常见状态码 200 301 302 404 500

    HTTP状态码(HTTP Status Code) 一些常见的状态码为: 一.1开头 1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码.代码 说明 100 (继续) 请求者应当继续提出 ...

  7. C#笔记---动态类(Dynamic)应用

    背景: 在Coding中有时候会遇到一些需要解析的数据,可是数据的字段数量和名称未统一,我们没法定义实体类来对应.那么我们就会想到通过C#的dynamic动态类来实现,如果大家注意的话一些ORM框架里 ...

  8. AC日记——阶乘和 openjudge 1.6 15

    15:阶乘和 总时间限制:  1000ms 内存限制:  65536kB 描述 用高精度计算出S=1!+2!+3!+…+n!(n≤50) 其中“!”表示阶乘,例如:5!=5*4*3*2*1. 输入正整 ...

  9. C# Interlocked 笔记

    无锁代码下,在读写字段时使用内存屏障往往是不够的.在 64 位字段上进行加.减操作需要使用Interlocked工具类这样更加重型的方式.Interlocked也提供了Exchange和Compare ...

  10. offsetLeft与offsetTop详解

    offsetLeft与offsetTop使用方法一样,只是一个是找距离定位父级(position:relative)左边的距离,一个是找距离定位父级上边的距离 没有定位则找body,我们还是看看ie7 ...