vue 系列——vue2-webpack2框架搭建踩坑之路


Posted in Javascript onDecember 22, 2017

react、vue、angular代表了3种前端工程化的思想,学习三大框架主要是理解它们的核心概念,比如组件、生命周期、单向数据流、双向绑定等。这些概念在非框架开发中,很少人会去这样系统化的思考,对于新手来说,很多概念都没有接触过,不知道从何入手一个react、vue或者是angular项目,下面我将会从零搭建vue项目,边做项目边学习vue的思想。

1、想要使用vue,我首先该怎么做?

想要学习vue,我第一件事是去vue官网看简介:https://cn.vuejs.org/v2/guide... ,仔细一看,vue现在有1.X和2.X的区别,很好,我果断选择2.X。

选中了vue版本,我上知乎搜索了vue框架搭建的方式,看了前辈的各种分享,了解到一个叫做 cooking 的好玩意,好在哪里?

cooking 的目标是将你从繁琐的构建配置中解放出来,同时还省去每个项目都要安装一堆开发依赖的麻烦。基于 webapck 但更友好的配置项、易用的扩展配置机制,让你专注项目忘掉配置。

哇,看到cooking官网介绍的这么好,我果断按照它的教程去做,瞎搞了一下下,发现用的不爽啊,一键配置环境看起来很高大上,可是还得去学习cooking的使用,而且本地得安装cooking,搞得我头晕,虽然在浏览器成功访问到了网页,但我还是放弃了这个好玩意。

这时候只能自己从0开始搭建项目了。

2、在github新建vue2-web项目。

打开github首页,点击start a project。

接着你会看到Create a new repository,需要你填写项目信息,这个步骤跳过。

然后项目就建好了,clone到本地。

3、初始化npm

用shell或者cmd进入项目根目录,执行下面的命令,选项什么的直接跳过,最后会生成package.json文件。

npm init

4、安装webpack

没有webpack就活不下去的感觉,但是配置webpack也会让人活不下去,太难记住webpack的配置项了,不过别担心,我已经帮你搞定这一步了,咋们都必须使用webpack2啊。

npm install --save-dev webpack

还需要前端服务器,做热更新呀,webpack-dev-server登场。

npm install --save-dev webpack-dev-server

5、创建webpack.config.js文件

和react中的webpack配置文件没什么区别,只是稍微改动一个地方即可移植过来使用。

千万不要把js和vue放到一起,不起作用的,必须分开,必须,这个坑我已经踩过了,为了找这个坑,浪费了我好几个小时,最最最隐蔽的一个地方。

rules: [{
   test: /\.js$/,
   use: ['babel-loader'],
   exclude: /node_modules/,
   include: resolve('src')
  },{
   test: /\.vue$/,
   use: ['vue-loader'],
   exclude: /node_modules/,
   include: resolve('src')
  },

6、创建.babelrc文件。

babel少不了,注意这里不是用react了,而是vue,包括下面几个插件,flow-vue、transform-vue-jsx。

{
 "presets": ["es2015", "flow-vue", "stage-0", "stage-2"],
 "plugins": ["transform-vue-jsx"],
 "comments": false,
 "env": {
 "production": {
  "plugins": [
  ["transform-runtime", { "polyfill": false, "regenerator": false }]
  ]
 }
 }
}

7、在package.json添加start命令

直接使用webpack-dev-server启动,哇塞,一堆报错,说少了哪个module,这个简单,因为配置文件里面引用的一堆module,还没有安装到项目呢,这时候一个个安装好就行了。

"start": "webpack-dev-server",

8、项目入口main.js文件。

这个文件名自己喜欢咋取就咋取,代码挺简单的,实例化一个Vue和路由,是不是和react的入口文件很像?当然,我做的是SPA,所以采用单入口的形式,如果是非SPA模式,就不是这种配置方式了。

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import routes from './routes';
import VueResource from 'vue-resource';
Vue.use(VueResource); //http请求注册
Vue.use(VueRouter); //路由注册
// 实例化路由
const router = new VueRouter({
 // mode: 'history', //H5 路由模式,需要服务端做渲染防止404错误
 base: __dirname,
 linkActiveClass: 'on',
 routes
})
let render = new Vue({
 router,
 el: '#app',
 render: h => h(App)
});
render;
// if (module.hot) {
//  非必须
//  module.hot.accept('./App.vue', () => render);
// }

9、路由routes.js

路由和react也非常像(简直一样好不),这里的vue页面采用.vue后缀的方式来写。

import Home from './components/home/Home.vue';
import Bang from './components/bang/Bang.vue';
export default [
 {
  path: '/',
  redirect: 'home'
 },
 {
  path: '/home',
  component: Home
 },
 {
  path: '/bang',
  component: Bang
 }
]

10、单页顶层容器App.vue

从index进来,就是这个文件,现在开始学习vue的精华。

template:vue的模板语言,也叫作jsx。

transition:过渡动画。

router-view:路由显示容器,通过router-link跳转加载的.vue会在这个容器渲染。router-link被我封装到nav.vue组件里面了。

script:导入了当前顶级容器需要用到的vue组件,包括头部、导航、首页。还有更多丰富的设置我没有研究,后续的学习中会深入下去。

style: 当前组件的样式,我配置了less语法支持。将style改成<style lang="less">即可写less。

<template>
 <div>
  <app-header logo="logo" ></app-header>
  <app-nav></app-nav>
  <transition name="fade" mode="out-in">
   <router-view class="view"></router-view>
  </transition>
 </div>
</template>
<script>
 import Header from './components/common/Header.vue';
 import Nav from './components/common/Nav.vue';
 import Home from './components/home/Home.vue';
 export default {
  name: 'App',
  components: {
   "app-header": Header,
   "app-nav": Nav,
   "app-home": Home
  }
 };
</script>
<style>
 body, html {
  font-size: 12px;
  margin: 0;
  padding: 0;
 }
</style>

踩坑的过程中,也遇到了好几个报错情况,最后都圆满解决了。

如果你想看更详细的vue组件代码,可以看具体项目:https://github.com/hyy1115/vu...

接下来我会继续完善该项目,探究一个更加灵活的vue架构实现。

运行效果图:vue-酷我demo

vue 系列——vue2-webpack2框架搭建踩坑之路

总结

以上所述是小编给大家介绍的vue 系列——vue2-webpack2框架搭建踩坑之路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木的支持!

Javascript 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
jquery.validate使用攻略 第二部
Jul 01 Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 Javascript
JQuery中clone方法复制节点
May 18 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
微信小程序 http请求的session管理
Jun 07 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
Openlayers实现地图全屏显示
Sep 28 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 #Javascript
详解webpack+express多页站点开发
Dec 22 #Javascript
如何开发出更好的JavaScript模块
Dec 22 #Javascript
详解webpack提取第三方库的正确姿势
Dec 22 #Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 #Javascript
JavaScript伪数组用法实例分析
Dec 22 #Javascript
JavaScript中Object值合并方法详解
Dec 22 #Javascript
You might like
php 在线打包_支持子目录
2008/06/28 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
java必学必会之static关键字
2015/12/03 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
对python中Json与object转化的方法详解
2018/12/31 Python
python实现月食效果实例代码
2019/06/18 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
Python sublime安装及配置过程详解
2020/06/29 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
如何安装ruby on rails
2014/02/09 面试题
自考生自我鉴定范文
2013/10/01 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
教师教学评估方案
2014/05/09 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
利用js实现简单开关灯代码
2021/11/23 Javascript