最近几天项目上使用了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. 类似material design的电影应用源码

    这个源码应用是一款大家比较熟悉的类似material design的电影应用源码,源码Material-Movies,material design风格的电影应用,这个应用的目的其实是为了讲解作者一篇 ...

  2. [书目20160526]Brain Rules 让大脑自由：释放天赋的12条定律

    推荐序1 12条定律,让大脑更聪明推荐序2 走过迷雾地带前  言 人人都有一个不可思议的大脑 定律1:越运动,大脑越聪明 信不信,“驴友”比“沙发土豆”更聪明! 老板,请把办公室的咖啡机换成跑步机! ...

  3. [转]How do I use variables in Oracle SQL Developer?

    本文转自:http://stackoverflow.com/questions/5653423/how-do-i-use-variables-in-oracle-sql-developer Below ...

  4. 挤点时间写博客-php&MySQL实践

    hi 晚上要吃火锅的嘛,挤点时间写点东西吧,别被老板发现哦 1.PHP与MySQL 五.文章发布系统之后台 5.2 创建配置文件和初始化文件 为了统一配置以及管理方便,还有就是减少代码的冗余. 分别为 ...

  5. cuda多线程间通信

    #include "cuda_runtime.h" #include "device_launch_parameters.h" #include <std ...

  6. Object-C中self和super的区别

    self与super的区别 原文CSDN evilotus 有所整理 **** 在ObjC中的类实现中经常看到这两个关键字"self"和"super",以以前o ...

  7. ComboBox的联动

    窗体搭建: 实现功能: 加载年级下拉框 选中年级时加载出科目下拉框 加载年级下拉框: 第一步,在DAL层中写一个方法,检索所有的年级名称集合,返回的是泛型集合List<> public L ...

  8. StackOverflow发布年度开发者调查报告：JavaScript备受欢迎

    StackOverflow刚刚发布了年度开发者调查报告,访问了来自173个国家的56033名编程人员,发现几乎所有开发者都精通于JavaScript.具体说来就是,超过85%的全栈开发者.超过90%的 ...

  9. ADO.NET防止字符串攻击方法

    在黑窗口里面输入内容时利用拼接语句可以对数据进行攻击 如:输入班级值 --:代表后边内容都被注释掉了 防止SQL注入攻击方法: 再给命令发送SQL语句的时候分两次发送,把SQL语句拆成两块,用户输入的 ...

  10. 转: Eclipse 分屏显示同一个文件

    Eclipse 分屏显示同一个文件   场景 : 某个类很大,可能有数千行.当你想要将类开头部分与中间或者靠后的部分进行对比时,请follow如下步骤: Window -> Editor -&g ...