V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
1340641314
V2EX  ›  分享创造

从零构建 vue2 + vue-router + vuex 开发环境到入门,实现基本的登录退出功能

  •  1
     
  •   1340641314 ·
    lzxb · 2016-10-31 14:05:50 +08:00 · 19825 次点击
    这是一个创建于 2936 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

    vue2 正式版已经发布将近一个月了,
    国庆过后就用在了公司的两个正式项目上,
    还有一个项目下个月也会采用 vue2 进行重构
    选择它没什么理由,如果非要说一个理由
    那就是它的中文文档远比 react , angularjs 要友好
    

    github:https://github.com/lzxb/vue2-demo

    源码说明

    项目目录说明

    .
    |-- config                           // 项目开发环境配置
    |   |-- index.js                     // 项目打包部署配置
    |-- src                              // 源码目录
    |   |-- components                   // 公共组件
    |       |-- header.vue               // 页面头部公共组件
    |       |-- index.js                 // 加载各种公共组件
    |   |-- config                       // 路由配置和程序的基本信息配置
    |       |-- routes.js                // 配置页面路由
    |   |-- css                          // 各种 css 文件
    |       |-- common.css               // 全局通用 css 文件
    |   |-- iconfont                     // 各种字体图标
    |   |-- images                       // 公共图片
    |   |-- less                         // 各种 less 文件
    |       |-- common.less              // 全局通用 less 文件
    |   |-- pages                        // 页面组件
    |       |-- home                     // 个人中心
    |       |-- index                    // 网站首页
    |       |-- login                    // 登录
    |       |-- signout                  // 退出
    |   |-- store                        // vuex 的状态管理
    |       |-- index.js                 // 加载各种 store 模块
    |       |-- user.js                  // 用户 store
    |   |-- template                     // 各种 html 文件
    |       |-- index.html               // 程序入口 html 文件
    |   |-- util                         // 公共的 js 方法, vue 的 mixin 混合
    |   |-- app.vue                      // 页面入口文件
    |   |-- main.js                      // 程序入口文件,加载各种公共组件
    |-- .babelrc                         // ES6 语法编译配置
    |-- gulpfile.js                      // 启动,打包,部署,自动化构建
    |-- webpack.config.js                // 程序打包配置
    |-- server.js                        // 代理服务器配置
    |-- README.md                        // 项目说明
    |-- package.json                     // 配置项目相关信息,通过执行 npm init 命令创建
    .
    

    开发环境依赖模块说明

    webpack 相关模块

    webpack                               // 用来构建打包程序
    webpack-dev-server                    // 开发环境下,设置代理服务器
    html-webpack-plugin                   // html 文件编译
    url-loader                            // 图片  转化成 base64 格式
    file-loader                           // 字体  将字体文件打包
    css-loader                            // css  生成
    less                                  // css  预处理器 less
    less-loader                           // css  预处理器 less 的 webpack 插件
    style-loader                          // css  插入到 style 标签
    autoprefixer-loader                   // css  浏览器兼容性问题处理
    babel-core                            // ES6  代码转换器
    babel-loader                          // ES6  代码转换器, webpack 插件
    babel-plugin-transform-object-assign  // ES6  Object.assign 方法做兼容处理
    babel-preset-es2015                   // ES6  代码编译成现在浏览器支持的 ES5
    babel-preset-stage-0                  // ES6  ES7 要使用的语法阶段
    vue-loader                            // vue  组件编译
    babel-helper-vue-jsx-merge-props      // vue  jsx 语法编译
    babel-plugin-syntax-jsx               // vue  jsx 语法编译
    babel-plugin-transform-vue-jsx        // vue  jsx 语法编译
    

    gulp 相关模块

    gulp                                  // 用来构建自动化工作流
    gulp-sftp                             // 将代码自动部署到服务器上
    del                                   // 代码部署成功后,删除本地编译的代码
    

    其他模块

    cross-env                             // 解决跨平台设置 NODE_ENV 的问题
    

    生产模块依赖说明

    vue 全家桶

    vue                                   // 构建用户界面的
    vue-router                            // 路由
    vuex                                  // 组件状态管理
    

    页面说明

    /login                                // 登录,不需要登录可以访问
    /signout                              // 退出登录,需要登录后才可以访问
    /home                                 // 个人中心,需要登录后才可以访问
    /                                     // 首页,不需要登录可以访问
    *                                     // 强制跳转到登录页面
    

    运行程序

    npm install
    npm run dev
    http://localhost:3000/app/
    

    开发教程

    1.安装开发环境

    vs code https://code.visualstudio.com

    开发时所用的编辑器,内置了终端,开发时使它执行命令运行程序
    

    Node.js https://nodejs.org

    JS 服务器端的运行环境,内置 npm 包管理器,管理项目依赖的各种模块,编译代码,自动部署到服务器就全靠他了
    

    2.安装全局模块

    webpack

    npm install -g webpack
    

    webpack 是一款模块加载器兼打包工具,它能把各种资源,例如 JS (含 JSX )、 coffee 、样式(含 less/sass )、图片等都作为模块来使用和处理

    gulp

    npm install -g gulp
    

    gulp 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务

    3.创建项目

    创建项目目录,并且在项目目录下执行命令,初始化 package.json 文件
    npm init
    

    4.安装开发环境依赖模块 npm install --save-dev 模块名

    npm install --save-dev webpack webpack-dev-server html-webpack-plugin url-loader file-loader css-loader less less-loader style-loader autoprefixer-loader babel-core babel-loader babel-plugin-transform-object-assign babel-preset-es2015 babel-preset-stage-0 vue-loader babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx gulp gulp-sftp del cross-env
    

    5.安装生产环境依赖模块 npm install --save 模块名

    npm install --save vue vue-router vuex
    

    5.搭建开发环境

    6.测试编译

    src/template/index.html

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    	<meta charset="UTF-8">
    	<title>vue2-demo</title>
    </head>
    
    <body>
    </body>
    
    </html>
    

    src/main.js

    alert('test')
    
    1.运行程序执行命令: npm run dev
    2.然后打开网址: http://localhost:3000/app/
    3.如果浏览器弹出 test ,说明我们的开发环境已经搭建通过。
    

    package.json 自定义命令说明

    npm run dev      开发环境
    npm run dev:test 将代码打包到测试服务器
    npm run dev:dist 将代码打包到正式服务器
    
    17 条回复    2018-03-12 09:50:53 +08:00
    pengbo37877
        1
    pengbo37877  
       2016-10-31 14:39:45 +08:00
    bugsnail
        2
    bugsnail  
       2016-10-31 15:18:54 +08:00
    正想整理一下这个基础,学习一下 vuejs ,已 fork
    1340641314
        3
    1340641314  
    OP
       2016-10-31 15:20:55 +08:00
    @bugsnail 谢谢支持
    vire
        4
    vire  
       2016-10-31 17:18:48 +08:00
    非常棒
    v1024
        5
    v1024  
       2016-10-31 20:17:51 +08:00 via iPhone
    不错,正缺大型项目的模版来参考。 a
    lulin
        6
    lulin  
       2016-10-31 20:43:19 +08:00
    狼主也混迹 V2EX = =
    Trim21
        7
    Trim21  
       2016-10-31 20:44:33 +08:00
    已 star
    1340641314
        8
    1340641314  
    OP
       2016-10-31 20:48:55 +08:00
    @lulin 感觉这边的气氛比较好
    wsph123
        9
    wsph123  
       2016-10-31 22:52:26 +08:00
    star star!
    aksoft
        10
    aksoft  
       2016-11-01 09:14:19 +08:00
    非常 good 啊。中间遇到的坑最好也加上。。
    mclxly
        11
    mclxly  
       2016-11-01 09:22:37 +08:00
    感谢分享~
    1340641314
        12
    1340641314  
    OP
       2016-11-01 09:33:19 +08:00
    @mclxly
    shawshi
        13
    shawshi  
       2016-11-01 12:17:56 +08:00
    mark 谢谢分享
    lwbjing
        14
    lwbjing  
       2016-11-01 14:16:58 +08:00
    vue2 我上个月上线了个项目,已经快一个月了。。 orz
    1340641314
        15
    1340641314  
    OP
       2016-11-01 16:15:12 +08:00
    @lwbjing 666 ,表示现在加班中
    osacar
        16
    osacar  
       2017-06-18 17:18:33 +08:00
    非常感谢!正需要这个教程实践。
    geek123
        17
    geek123  
       2018-03-12 09:50:53 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1398 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 17:39 · PVG 01:39 · LAX 09:39 · JFK 12:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.