使用webpack搭建vue开发环境

时间：2021-10-19 00:20:09

最近几天项目上使用了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&plus;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开发环境&plus;IIS部署

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

  7. windows下搭建vue开发环境&plus;IIS部署

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

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

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

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

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

随机推荐

  1. HDU5934 Bomb&lpar;2016杭州CCPC第二题&rpar;（强连通缩点）

    Bomb Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  2. leetcode Longest Common Prefix python

    class Solution(object): def longestCommonPrefix(self, strs): """ :type strs: List[str ...

  3. How to create a zip file in NetSuite SuiteScript 2&period;0 如何在现有SuiteScript中创建和下载ZIP压缩文档

    Background We all knows that: NetSuite filecabinet provided a feature to download a folder to a zip ...

  4. jquery之each遍历list列表

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  5. Apache配置腾讯云SSL证书指引

    一．安装Apache 1) 使用yum安装Apache # yum install httpd 2) 修改测试页面 # vim /var/www/html/index.heml PS:修改为测试内容, ...

  6. Winform 控件的入门级使用（一）

    开始总结一下控件的基本用法,方便以后查阅. 一.Label Label 的使用频率很高,基本上也没有什么难度. #region Winform //label label.Text = "这 ...

  7. C&num; 默认访问修饰符

    c# 中类,成员,枚举,结构等默认访问修饰符是? 根据MSDN文档有: [MSDN] Classes and structs that are not nested within other clas ...

  8. c&num;判断字符串是否为空或null

    通常有: string str=""; .if(str=="") .if(str==String.Empty) .) 三种方法的效果一样,都可以判断字符串是否为 ...

  9. VS2015 新建 ASP&period;NET Web应用程序&comma; 此模板尝试加载程序集&OpenCurlyQuote;Microsoft&period;VisualStudio&period;Web&period;Project’&comma; 解决方案

    下载并安装Azure的SDK即可:

  10. python3—列表

    列表是什么 name = ["jim", "lilei", "lucy"] #方括号表示,逗号分隔 print(name) print(na ...

相关文章