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 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
js控制input输入字符解析
Dec 27 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
vue mvvm数据响应实现
Nov 11 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
PHP时间处理类操作示例
2018/09/05 PHP
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
python循环监控远程端口的方法
2015/03/14 Python
python安装以及IDE的配置教程
2015/04/29 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
如何用python 操作zookeeper
2020/12/28 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
请说出几个常用的异常类
2013/01/08 面试题
金蝶的一道SQL笔试题
2012/12/18 面试题
自我鉴定怎么写
2014/01/12 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
重点工程汇报材料
2014/08/27 职场文书
Python基础 括号()[]{}的详解
2021/11/07 Python
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js