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. MySQL 5.6查询优化器新特性的“BUG” eq_range_index_dive_limit

    本文转自 http://www.imysql.cn 最近碰到一个慢SQL问题,解决过程有点小曲折,和大家分享下. SQL本身不复杂,表结构.索引也比较简单,不过个别字段存在于多个索引中. CREATE ...

  2. ubuntu下部署SVN

    sudo apt-get install subversion 创建库文件夹 sudo mkdir svn sudo chown -R 777 svn 设置为所有用户配置777权限 sudo chmo ...

  3. Game02 最新版本2.0.0

    Game02发布转站于此,欢迎大家下载.... 简介: Game02是由ImGenius开发的一款即时在线小游戏.玩法简单,易于上手,主要靠技术,不会出现不要脸的充值等内容. 操控方法:W和A左右移动 ...

  4. Epson机械手4轴6轴示意图

    世界坐标系(World Coordinate System,简称WCS)是由三个垂直并相交的坐标轴X轴.Y轴和Z轴构成,一般显示在绘图区域的左下角,如图1-7所示.X轴和Y轴的交点就是坐标原点O,X轴 ...

  5. Backbone的一点使用心得

    Backbone的其实感觉上上手很难,大概在一年前就想实践下,结果总是没有付诸行动,这次需求中狠狠心决定一定要使用一次看看,感受下. 可是第一步真的比较困难,因为直接看API好像没有感觉就在网上找实例 ...

  6. Nginx中的进程亲和性 affinity

    Nginx采用多进程Master/Worker结构,Worker进程数为CPU个数时工作效率最高,Nginx通过affinity为每个Worker进程绑定一个CPU,避免进程切换带来的消耗,同时能够保 ...

  7. php 数据库select函数//待编辑

    <?php $con = mysql_connect("localhost","root","root"); if (!$con) { ...

  8. DB2获取有效工作时长函数（排除节假日、排除午休时间）

    CREATE OR REPLACE FUNCTION DIFFHOURTIME_WITHOUTHOLIDAY_FUN ( STARTTIME ), ENDTIME ) ) RETURNS DOUBLE ...

  9. Oracle中SQL查询表字段基本信息、主键、外键(转)

    select utc.column_name, utc.data_type, utc.data_length, utc.data_precision, utc.data_Scale, utc.null ...

  10. Command Pattern

    当(客户)对象访问(服务)请求服务时,最直接的方法就是方法调用.