最近几天项目上使用了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 如何在pdf中生成表格

    1.目标 在pdf中生成一个可变表头的表格,并向其中填充数据.通过泛型动态的生成表头,通过反射动态获取实体类(我这里是User)的get方法动态获得数据,从而达到动态生成表格. 每天生成一个文件夹存储 ...

  2. Python Select 解析

    首先列一下,sellect.poll.epoll三者的区别 select select最早于1983年出现在4.2BSD中,它通过一个select()系统调用来监视多个文件描述符的数组,当select ...

  3. Java实现点击一个控件实现删除一个控件的方法

    最近在做项目的时候需要处理点击一个JLabel实现删除这一个JLabel的功能.最近折磨了一点时间,查了一下API.找到2个方法可以实现这个功能. remove public void remove( ...

  4. C++11 之 delete 和 default

    1  特殊成员函数 设计一个类,没有成员函数 (member function),只有数据成员 (member data) class DataOnly { private: std::string ...

  5. 如何用ZBrush做人体造型雕刻

    之前我们用ZBrush®中的Curves和Insert笔刷快速创建模型的躯干.四肢以及手指.经过老师耐心的讲解我们也收获了很多,知道了创建模型的流程和雕刻技巧.今天的ZBrush教程将结合一些新的雕刻 ...

  6. Maven学习（三）生命周期

    maven有三套生命周期 1.clean       清理项目 2.default     构建项目 3.site           建立项目站点 每套生命周期都包含了一些阶段,这些阶段是有序的,后 ...

  7. [No000046]为什么跳槽加薪会比内部调薪要高？

    有网友在知乎提问: 最近在思考一个问题,为什么跳槽往往意味着加薪? 如果一个人确有价值,为什么在原来的公司没有在薪水上体现出来?如果没有价值,为什么跳槽以后就会加薪?还是可以单纯的解释为,应聘者和招聘 ...

  8. java 25 - 5 网络编程之多线程实现聊天室

    平时聊天都是在同一个窗口的,所以,这个窗口同时实现发送数据和接收数据,这时就需要多线程实现. 建立一个类: 把聊天的发送端和接收端放在同一个类,启动一个窗口 public class CharRoom ...

  9. 如何在Kali Linux下编译Windows Exploit

    前言 微软的Windows在企业或是个人应用领域占据着最大的市场份额,在渗透测试过程中你会经常遇到很多Windows的工作站和服务器.另一方面,大多数渗透测试人员主要使用基于Linux的发行版渗透测试 ...

  10. 隐写-CTF中图片隐藏文件分离方法总结

    0x00 前言 在安全的大趋势下,信息安全越来越来受到国家和企业的重视,所以CTF比赛场次越来越多,而且比赛形式也不断的创新,题目也更加新颖有趣,对选手的综合信息安全能力有一个较好的考验,当然更好的是 ...