搭建vue2.0+vuex+vue-router+babel+webpack环境

来源：互联网发布：华晨宇全球歌迷会淘宝编辑：程序博客网时间：2024/04/29 15:09

简单的自建流程

1、创建项目目录
2、 git 仓储 git init
3、写.gitignore

    .gitignore    node_modules    npm-debug.log    .idea

4、 npm init 创建npm 包管理
or 如果有专门的git 资源服务器，可以先ssh登录，利用git init –bare + Proname .
5、创建一个READE.md
6、安装babel 作为开发依赖 –devSer

    "babel-core": "^6.23.1",    "babel-loader": "^6.3.2",    "babel-preset-es2015": "^6.22.0",    "babel-preset-stage-2": "^6.22.0"

7、写babel 的配置文件 .babelrc

{  "presets":[    ["es2015",{ "modules":false }],    "stage-2"  ],  "plugins":[]}

8、安装vue vuex vue-router vuex-router-sync

    "vue": "^2.2.1",    "vue-router": "^2.3.0",    "vuex": "^2.2.1",    "vuex-router-sync": "^4.1.2"

9、创建目录结构创建index.html(模板文件)、创建index.js

index.html 模板内容如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">    <meta name="format-detection" content="telephone=no">    <meta name="apple-touch-fullscreen" content="yes">    <meta name="x5-fullscreen" content="true">    <!-- 缓存控制 -->    <!--<meta name="cache-control" content="max-age=0"/>-->    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">    <title>疯狂猜球</title></head><script>    var _hmt = _hmt || [];    (function() {        var hm = document.createElement("script");        hm.src = "https://hm.baidu.com/hm.js?246b1c759e9a6088fe7c2d91d2d200ee";        var s = document.getElementsByTagName("script")[0];        s.parentNode.insertBefore(hm, s);    })();    window.onresize = function(){        document.documentElement.style.fontSize=document.documentElement.clientWidth / 7.5 + 'px';    };    document.documentElement.style.fontSize=document.documentElement.clientWidth / 7.5 + 'px';</script><body><div id="app"></div></body></html>

10、写webpack.config.js
11、写npm 的快捷启动方式

常用的快捷启动类型：
利用cross-env 进行环境变量的设置，利用开发环境、测试环境、线上环境的打包、测试。

  "scripts": {    "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.config.js --progress --hide-modules",    "prod": "cross-env NODE_ENV=preRelease webpack --config build/webpack.prod.config.js --progress --hide-modules",    "dev": "node server.js",    "localdev": "cross-env LOCAL_ENV=true PORT=80 node server.js",    "clean": "rimraf dist/*",    "lint": "eslint --ext .js,.vue src",    "lint-fix": "eslint --ext .js,.vue src --fix",    "precommit": "npm run lint"  },

,里写代码片`终的目录结构如下图：
这里写图片描述

12、.vue 组件模板

<template>    <div >    </div></template><script>    export default {        data () {            return {                title: ''            }        },        watch: {},        methods: {            showAwardBoxFn () {            }        },        computed: {            setAwardImg () {                return this.$store.state.awardAllData.setAwardImg            }        },        mounted () {        }    }</script><style></style>

如何追求速度可以选择官方的脚手架。
下面是一篇可以参考的官方脚手架blog:
http://www.cnblogs.com/jiajia123/p/6132265.html
https://segmentfault.com/a/1190000006852262#articleHeader10
webpack原理
http://www.jianshu.com/p/42e11515c10f

利用express 进行接口转发

0 0