基于vue快速搭建开发框架

从去年开始接触vue开发，也从头到尾经历了两个大项目，从搭建项目一点点的也积累了不少经验，也给自己挖了不少的坑。同样的，填的坑也不少。今天就总结一下，如何搭建vue前端开发框架。其中涉及的相关技术有：vue-cli脚手架、vuex作为全局事件、变量的管理，global.js（中小型项目开发时不需要复杂的vuex时使用），vue-router，axios，scss等。

1.使用vue-cli生成webpack项目模板

• 安装node

  首先需要安装node环境，可以直接到中文官网http://nodejs.cn/下载安装包。

  只是这样安装的 node 是固定版本的，如果需要多版本的 node，可以使用 nvm 安装[http://blog.csdn.net/s8460049/article/details/52396399] (http://blog.csdn.net/s8460049/article/details/52396399)

  安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。

• 安装vue-cli

  安装好了 node，我们可以直接全局安装 vue-cli：

  npm install -g vue-cli

最新的 vue 项目模板中，都带有 webpack 插件，所以这里可以不安装 webpack

安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。

如果提示“无法识别 ‘vue’ ” ，有可能是 npm 版本过低，可以使用 npm install -g npm 来更新版本

• 生成项目

  首先需要在命令行中进入到项目目录，然后输入：

  vue init webpack Vue-Project

  按照提示项进行设置生成项目即可。

  生成之后使用

  npm install

  即可安装依赖

  然后启动项目

  npm run dev

  至此，项目的生成就完成了

2.对生成的项目进行配置

刚生成的项目因为通用的原因，所以没有太多的定制需求，在这里，我们将vuex，axios，axios二次封装,global全局文件等等设置，加速开发。

（1）axios集成以及二次封装

 运行如下命令安装axios 

npm install -g axios

安装完成之后，先不要急于使用，首先在src目录下新建api文件夹，同时在api文件夹下新建index.js文件，对axios进行二次封装，方便请求。完成之后的项目结构以及index.js的文件内容如下图

至此，axios的封装也已完成，下面展示如何去调用，以便开发的时候调用层次更加鲜明，逻辑更加清晰。

• 在api文件夹下新建一个javascript文件，用于存放接口相关信息和实现逻辑
  

看一下在实际使用中的效果

可以发现使用es6的import和export进行模块化之后，就将api接口请求从界面逻辑中分离出来，单独开发，使得层次更加分明，增加接口的复用率更加方便项目的管理。让后期项目的管理更加容易。

（2）配置vuex

当你的项目比较复杂，对项目的状态管理比较复杂时，就需要集成vuex进行项目状态的管理，集成之后的效果如下

因为官网上都有相关配置，就不做详细说明，需要看文件内具体内容的可以去项目的github地址进行查看

(3)global文件以及全局方法文件的创建以及维护

在很多情况下，你的项目都不会那么的复杂，所以使用vuex反而会增加项目的复杂度，降低你的开发效率，这种时候，就需要我们用一个全局的js文件来管理相关的变量（bus），将这些变量统一存放在javascript的全局global下进行管理，再用专门的文件对这些变量进行管理，使得项目更加整洁。

• 创建global.js用来存放全局变量

• 创建globalFun.js用来专门管理global中的全局变量

如果项目没有太过复杂的话，这样的两个文件基本可以替代vuex的相关功能，并且这样使用可以很大程度的降低管理的复杂度，相当实用。
注：在globalFun.js中import global.js在main.js中引入gloablFun.js

• 创建mainFun.js文件对全局方法进行管理

  每次开发程序时，总会有很多的全局方法需要管理，所以干脆使用一个专门管理全局方法的文件进行统一管理。

至此，一套相当实用的基于vue-cli的开发框架就配置完成，项目已经上传到github上，你也可以到github上进行查看。
从去年开始接触vue开发，也从头到尾经历了两个大项目，从搭建项目一点点的也积累了不少经验，也给自己挖了不少的坑。同样的，填的坑也不少。今天就总结一下，如何搭建vue前端开发框架。其中涉及的相关技术有：vue-cli脚手架、vuex作为—

title: 基于vue快速搭建开发框架

从去年开始接触vue开发，也从头到尾经历了两个大项目，从搭建项目一点点的也积累了不少经验，也给自己挖了不少的坑。同样的，填的坑也不少。今天就总结一下，如何搭建vue前端开发框架。其中涉及的相关技术有：vue-cli脚手架、vuex作为全局事件、变量的管理，global.js（中小型项目开发时不需要复杂的vuex时使用），vue-router，axios，scss等。

1.使用vue-cli生成webpack项目模板

• 安装node

  首先需要安装node环境，可以直接到中文官网http://nodejs.cn/下载安装包。

  只是这样安装的 node 是固定版本的，如果需要多版本的 node，可以使用 nvm 安装[http://blog.csdn.net/s8460049/article/details/52396399] (http://blog.csdn.net/s8460049/article/details/52396399)

  安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。

• 安装vue-cli

  安装好了 node，我们可以直接全局安装 vue-cli：

  npm install -g vue-cli

最新的 vue 项目模板中，都带有 webpack 插件，所以这里可以不安装 webpack

安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。

如果提示“无法识别 ‘vue’ ” ，有可能是 npm 版本过低，可以使用 npm install -g npm 来更新版本

• 生成项目

  首先需要在命令行中进入到项目目录，然后输入：

  vue init webpack Vue-Project

  按照提示项进行设置生成项目即可。

  生成之后使用

  npm install

  即可安装依赖

  然后启动项目

  npm run dev

  至此，项目的生成就完成了

2.对生成的项目进行配置

刚生成的项目因为通用的原因，所以没有太多的定制需求，在这里，我们将vuex，axios，axios二次封装,global全局文件等等设置，加速开发。

（1）axios集成以及二次封装

 运行如下命令安装axios 

npm install -g axios

安装完成之后，先不要急于使用，首先在src目录下新建api文件夹，同时在api文件夹下新建index.js文件，对axios进行二次封装，方便请求。完成之后的项目结构以及index.js的文件内容如下图

至此，axios的封装也已完成，下面展示如何去调用，以便开发的时候调用层次更加鲜明，逻辑更加清晰。

• 在api文件夹下新建一个javascript文件，用于存放接口相关信息和实现逻辑
  

看一下在实际使用中的效果

可以发现使用es6的import和export进行模块化之后，就将api接口请求从界面逻辑中分离出来，单独开发，使得层次更加分明，增加接口的复用率更加方便项目的管理。让后期项目的管理更加容易。

（2）配置vuex

当你的项目比较复杂，对项目的状态管理比较复杂时，就需要集成vuex进行项目状态的管理，集成之后的效果如下

因为官网上都有相关配置，就不做详细说明，需要看文件内具体内容的可以去项目的github地址进行查看

(3)global文件以及全局方法文件的创建以及维护

在很多情况下，你的项目都不会那么的复杂，所以使用vuex反而会增加项目的复杂度，降低你的开发效率，这种时候，就需要我们用一个全局的js文件来管理相关的变量（bus），将这些变量统一存放在javascript的全局global下进行管理，再用专门的文件对这些变量进行管理，使得项目更加整洁。

• 创建global.js用来存放全局变量

• 创建globalFun.js用来专门管理global中的全局变量

如果项目没有太过复杂的话，这样的两个文件基本可以替代vuex的相关功能，并且这样使用可以很大程度的降低管理的复杂度，相当实用。
注：在globalFun.js中import global.js在main.js中引入gloablFun.js

• 创建mainFun.js文件对全局方法进行管理

  每次开发程序时，总会有很多的全局方法需要管理，所以干脆使用一个专门管理全局方法的文件进行统一管理。

至此，一套相当实用的基于vue-cli的开发框架就配置完成，项目已经上传到github上，你也可以到github上进行查看。全局事件、变量的管理，global.js（中小型项目开发时不需要复杂的vuex时使用），vue-router，axios，scss等。

1.使用vue-cli生成webpack项目模板

• 安装node

  首先需要安装node环境，可以直接到中文官网http://nodejs.cn/下载安装包。

  只是这样安装的 node 是固定版本的，如果需要多版本的 node，可以使用 nvm 安装[http://blog.csdn.net/s8460049/article/details/52396399] (http://blog.csdn.net/s8460049/article/details/52396399)

  安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。

• 安装vue-cli

  安装好了 node，我们可以直接全局安装 vue-cli：

  npm install -g vue-cli

最新的 vue 项目模板中，都带有 webpack 插件，所以这里可以不安装 webpack

安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。

如果提示“无法识别 ‘vue’ ” ，有可能是 npm 版本过低，可以使用 npm install -g npm 来更新版本

• 生成项目

  首先需要在命令行中进入到项目目录，然后输入：

  vue init webpack Vue-Project

  按照提示项进行设置生成项目即可。

  生成之后使用

  npm install

  即可安装依赖

  然后启动项目

  npm run dev

  至此，项目的生成就完成了

2.对生成的项目进行配置

刚生成的项目因为通用的原因，所以没有太多的定制需求，在这里，我们将vuex，axios，axios二次封装,global全局文件等等设置，加速开发。

（1）axios集成以及二次封装

 运行如下命令安装axios 

npm install -g axios

安装完成之后，先不要急于使用，首先在src目录下新建api文件夹，同时在api文件夹下新建index.js文件，对axios进行二次封装，方便请求。完成之后的项目结构以及index.js的文件内容如下图

至此，axios的封装也已完成，下面展示如何去调用，以便开发的时候调用层次更加鲜明，逻辑更加清晰。

• 在api文件夹下新建一个javascript文件，用于存放接口相关信息和实现逻辑
  

看一下在实际使用中的效果

可以发现使用es6的import和export进行模块化之后，就将api接口请求从界面逻辑中分离出来，单独开发，使得层次更加分明，增加接口的复用率更加方便项目的管理。让后期项目的管理更加容易。

（2）配置vuex

当你的项目比较复杂，对项目的状态管理比较复杂时，就需要集成vuex进行项目状态的管理，集成之后的效果如下

因为官网上都有相关配置，就不做详细说明，需要看文件内具体内容的可以去项目的github地址进行查看

(3)global文件以及全局方法文件的创建以及维护

在很多情况下，你的项目都不会那么的复杂，所以使用vuex反而会增加项目的复杂度，降低你的开发效率，这种时候，就需要我们用一个全局的js文件来管理相关的变量（bus），将这些变量统一存放在javascript的全局global下进行管理，再用专门的文件对这些变量进行管理，使得项目更加整洁。

• 创建global.js用来存放全局变量

• 创建globalFun.js用来专门管理global中的全局变量

如果项目没有太过复杂的话，这样的两个文件基本可以替代vuex的相关功能，并且这样使用可以很大程度的降低管理的复杂度，相当实用。
注：在globalFun.js中import global.js在main.js中引入gloablFun.js

• 创建mainFun.js文件对全局方法进行管理

  每次开发程序时，总会有很多的全局方法需要管理，所以干脆使用一个专门管理全局方法的文件进行统一管理。

至此，一套相当实用的基于vue-cli的开发框架就配置完成，项目已经上传到github上，你也可以到github上进行查看。
- LaTex数学公式
- UML序列图和流程图
- 离线写博客
- 导入导出Markdown文件
- 丰富的快捷键

---

快捷键

• 加粗 Ctrl + B
• 斜体 Ctrl + I
• 引用 Ctrl + Q
• 插入链接 Ctrl + L
• 插入代码 Ctrl + K
• 插入图片 Ctrl + G
• 提升标题 Ctrl + H
• 有序列表 Ctrl + O
• 无序列表 Ctrl + U
• 横线 Ctrl + R
• 撤销 Ctrl + Z
• 重做 Ctrl + Y

Markdown及扩展

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。 —— [ 维基百科 ]

使用简单的符号标识不同的标题，将某些文字标记为粗体或者斜体，创建一个链接等，详细语法参考帮助？。

本编辑器支持 Markdown Extra , 　扩展了很多好用的功能。具体请参考Github.

表格

Markdown　Extra　表格语法：

项目	价格
Computer	$1600
Phone	$12
Pipe	$1

可以使用冒号来定义对齐方式：

项目	价格	数量
Computer	1600 元	5
Phone	12 元	12
Pipe	1 元	234

定义列表

Markdown　Extra　定义列表语法：

项目１

项目２

定义 A

定义 B

项目３

定义 C

定义 D

定义D内容

代码块

代码块语法遵循标准markdown代码，例如：

@requires_authorization
def somefunc(param1='', param2=0):
    '''A docstring'''
    if param1 > param2: # interesting
        print 'Greater'
    return (param2 - param1 + 1) or None
class SomeClass:
    pass
>>> message = '''interpreter
... prompt'''

脚注

生成一个脚注1.

目录

用 [TOC]来生成目录：

数学公式

使用MathJax渲染LaTex 数学公式，详见math.stackexchange.com.

• 行内公式，数学公式为：Γ(n)=(n−1)!∀n∈ℕ 。
• 块级公式：

x=−b±b2−4ac‾‾‾‾‾‾‾‾√2a

更多LaTex语法请参考 这儿.

UML 图:

可以渲染序列图：

或者流程图：

• 关于 序列图 语法，参考 这儿,
• 关于 流程图 语法，参考 这儿.

离线写博客

即使用户在没有网络的情况下，也可以通过本编辑器离线写博客（直接在曾经使用过的浏览器中输入write.blog.csdn.net/mdeditor即可。Markdown编辑器使用浏览器离线存储将内容保存在本地。

用户写博客的过程中，内容实时保存在浏览器缓存中，在用户关闭浏览器或者其它异常情况下，内容不会丢失。用户再次打开浏览器时，会显示上次用户正在编辑的没有发表的内容。

博客发表后，本地缓存将被删除。　

用户可以选择 把正在写的博客保存到服务器草稿箱，即使换浏览器或者清除缓存，内容也不会丢失。

注意：虽然浏览器存储大部分时候都比较可靠，但为了您的数据安全，在联网后，请务必及时发表或者保存到服务器草稿箱。

浏览器兼容

1. 目前，本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。
2. IE９以下不支持
3. IE９，１０，１１存在以下问题
   
   1. 不支持离线功能
   2. IE9不支持文件导入导出
   3. IE10不支持拖拽文件导入

---

---

1. 这里是 脚注 的 内容. ↩