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

最新推荐文章于 2024-07-04 08:00:00 发布

置顶

oo灵性

最新推荐文章于 2024-07-04 08:00:00 发布

阅读量1.9k

点赞数

分类专栏：模块化编程文章标签： vue-cli

本文链接：https://blog.csdn.net/u010427666/article/details/59057832

版权

本文介绍了手动搭建vue2.0项目的基本流程，包括创建项目目录、配置git、npm初始化、安装babel、vue及相关插件、设置webpack和npm启动脚本。同时，提到了利用express进行接口转发，以及webpack的CommonsChunk插件优化，以实现代码复用和提升应用加载速度。

摘要由CSDN通过智能技术生成

简单的自建流程

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=

关注

专栏目录