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

日期：2020-05-11 栏目：程序人生浏览：次

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。

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

相关推荐