Vue+webpack+babel环境搭建

github地址

https://github.com/haoyongliang/webpack-babel-Vue

1.首先要了解Vue项目结构

  1. 简单的目录结构:
    2. 

  2.     |-index.html
    3. 

  3.     |-main.js    入口文件
    4. 

  4.     |-App.vue    vue文件，官方推荐命名法
    5. 

  5.     |-package.json    工程文件(项目依赖、名称、配置)npm init --yes 生成
    6. 

  6.     |-webpack.config.js    webpack配置文件

2.在webpack.config.js中指定入口文件和输出文件

  1. module.exports = {
    2. 

  2.   entry:'./main.js',//指定入口文件
    3. 

  3.   output : {
    4. 

  4.         path:__dirname,
    5. 

  5.         filename:'boundle.js'//输出文件
    6. 

  6.   }
    7. 

  7. }

3.在index.html中引入生成的boundle.js

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.  <meta charset="UTF-8">
    5. 

  5.  <title>Title</title>
    6. 

  6. </head>
    7. 

  7. <body>
    8. 

  8.  <app></app>
    9. 

  9.  <script src="boundle.js"></script>
    10. 

  10. </body>
    11. 

  11. </html>

4.安装环境

a.webpack安装配置

  1.     cnpm install webpack --save-dev  //不带服务器版本
    2. 

  2.     cnpm install webpack-dev-server --save-dev //带服务器版本

注意 两个都要安装

在package.json中配置开发命令

  1. "scripts":{
    2. 

  2.   "dev" : "webpack-dev-server --inline --hot --port 8082"
    3. 

  3. }

–inline:文件修改后则重启

–hot 模块热载

–port指定端口

b.将App.vue 变成正常代码

  1. cnpm install vue-loader@8.5.4 --save-dev
    2. 

  2. cnpm install vue-html-loader --save-dev
    3. 

  3. cnpm install css-loader --save-dev
    4. 

  4. cnpm install vue-style-loader --save-dev
    5. 

  5. cnpm install vue-hot-reload-api@1.3.2 --save-dev

vue-hot-reload-api 每次改完后验证代码有没有错误功能

在webpack.config.js中添加

  1. module:{
    2. 

  2.   loaders:[
    3. 

  3.     {test:/\.vue$/,loader:'vue'},//将.vue文件通过vue-loader变成正常代码
    4. 

  4.     {test:/\.js$/,loader:"babel",exclude:/node_modules/},//将除了node_modules文件夹下的.js文件通过babel转换成兼容代码
    5. 

  5.   ]
    6. 

  6. }

c.配置babel编译环境

安装babel相关程序

  1. cnpm install babel-loader --save-dev
    2. 

  2. cnpm install babel-core --save-dev
    3. 

  3. cnpm install babel-plugin-transform-runtime --save-dev
    4. 

  4. cnpm install babel-preset-es2015 --save-dev
    5. 

  5. cnpm install babel-runtime --save-dev

在webpack.config.js中添加

  1. //配置ES6编译环境
    2. 

  2. babel:{
    3. 

  3.   presets:['es2015'],
    4. 

  4.   plugins:['transform-runtime']//每次改完代码时时编译插件
    5. 

  5. }

d.安装Vue

  1. cnpm install vue@1.0.28 --save

5.在App.vue中添加代码

  1. <template>
    2. 

  2.     <h1>welcome Vue</h1>
    3. 

  3. </template>
    4. 

  4. <script>
    5. 

    6. 

  6. </script>
    7. 

  7. <style>
    8. 

  8.     body{
    9. 

  9.         background: #abc
    10. 

  10.     }
    11. 

  11. </style>

6.在入口文件main.js中添加代码

  1. import Vue from 'vue';
    2. 

  2. import App from './App.vue';
    3. 

    4. 

  4. new Vue({
    5. 

  5.     el:"body",
    6. 

  6.     components:{
    7. 

  7.         app:App
    8. 

  8.     }
    9. 

  9. });

7.配置项目规范约束和git忽略文件

.gitignore

.editorconfig

手动搭建Vue环境的更多相关文章

  1. WindowsServer2012 R2 64位中文标准版(IIS8.5)下手动搭建PHP环境详细图文教程(二)安装IIS8.5

    //来源:http://www.imaoye.com/Technology/WindowsServer2012R264IIS85.html 阿里云服务器ECS Windows Server 2012 ...

  2. 混合式app ionic2.x 手动搭建开发环境教程分享(nodejs,jdk,ant,androidsdk)

    1.ionic简介 为什么选用ionic: 彻底开源且免费 性能优异 基于红的发紫的AngularJs 漂亮的UI 强大的命令行(基于更热门的nodejs) 开发团队非常活跃 ngCordova,将主 ...

  3. 初次搭建vue环境（最基础的）

    一直以来觉得搭建环境是自己的短板,恰巧老大跟我说他刚才面试一个有4年工作经验的人,给那面试的人出了到机试题,给了1小时的时间连环境都没搭好.且不说那人的工作经验是否掺有水分,自己还是有点尴尬的,以前的 ...

  4. 手动搭建Vue之前奏:搭建webpack项目

    手动搭建vue项目 搭建vue前首先搭建webpack项目 首先你应当安装一下npm以及nodejs 安装完成后,进行如下操作: // 创建项目根目录 mkdir some_project_name ...

  5. 搭建Vue环境总是出错，就重新安装就好了

    总是报错,还不如重新安装.. 错误千奇百怪,解决了 这个错误又会出现另外一个. 百度了一个挺好用的e 在window下搭建Vue.Js开发环境   nodejs官网http://nodejs.cn/下 ...

  6. Linux手动搭建LAMP环境

    当你看到标题里的“手动搭建”,你是不是会想,难不成还有“自动搭建”?当然......不是,这里的“手动搭建”是指按部就班的搭建Apache.MySQL.PHP环境,是相对于集成软件包而言的.所以你是不 ...

  7. VUE-Windows系统下搭建vue环境

    一.安装node.js(https://nodejs.org/en/) 下载完毕后,可以安装node,建议不要安装在系统盘(如C:).注意记下路径..   此处默认安装这4项即可,点击Next按钮. ...

  8. Ionic 2 + 手动搭建开发环境教程 【转】

    ionic简介 为什么选用ionic: 彻底开源且免费 性能优异 基于红的发紫的AngularJs 漂亮的UI 强大的命令行(基于更热门的nodejs) 开发团队非常活跃. ngCordova,将主流 ...

  9. 18.搭建 vue 环境

    第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装1.2 如果本机已经安装node的运行换,请更新至最新的node 版本下载地址:https://nod ...

随机推荐

  1. background复合属性详解（上）：background-image

    background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...

  2. qml中打开本地html

    main.cpp QString tmploc = QStandardPaths::writableLocation(QStandardPaths::GenericDataLocation); QDi ...

  3. ORM

    参考:http://wenku.baidu.com/link?url=Kc9KHESrzLUp8KtcQH4Ls4QQpKosNiyQAVgkNX-UN4j9QuRhS-Hy5FGJjmWW2oszT ...

  4. HDU 3033 分组背包变形（每种至少一个）

    I love sneakers! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  5. 在Ubuntu环境把PPT和Word转换为swf文件

    项目需要一个在线浏览文档的功能,于是参照网上的代码写了一份利用Microsoft Office 2010和swftools-2013-04-09-1007.exe转换的程序 思路:调用电脑本机的off ...

  6. eclipse 字体、背景、自动提示设置

    1 字体设置 点击最上面菜单栏的“Window”---“preferences”弹出属性界面 General---  Appearance---Colors and Fronts,找到Java 选择“ ...

  7. C++ 11 lambda

    转载:http://www.cnblogs.com/kedebug/p/3224561.html lambda 表达式的简单语法如下:[capture] (parameters) -> retu ...

  8. 针对不同浏览器，CSS如何写

    我们在开发DIV+CSS页面时候常常会遇到开发出的网页的一些地方在各大浏览器比如微软IE6.微软IE7.微软IE8.火狐浏览器.谷歌浏览器有一些不同,如宽度.高度等地方有相差误.IE6比较老的版本浏览 ...

  9. flex中image控件source属性改变的例子

    Download: main.mxml <?xml version="1.0" encoding="utf-8"?> <mx:Applicat ...

  10. 杭电ACM1002

    原题:http://acm.hdu.edu.cn/showproblem.php?pid=1002 #include <stdio.h> #include <string.h> ...