一.认识Vue
Vue.js的官方文档中式这样介绍它的。简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。简单小巧是指Vue.js压缩后大小仅17KB。所谓渐进式，就是你可以一步一步、有阶段地来使用Vue.js,不必一开始就使用所有的东西。随着本文的不断介绍，你回深刻感受到这一点。它让Web开发变得更加简单,提供现代Web开发中常见的高级功能，比如
- 1.解耦视图与数据
- 2.可复用的组件
- 3.前端路由
- 4.状态管理
- 5.虚拟DOM（Virtual DOM)
接下我就直接从实战(使用脚手架)开始Vue的使用
.二.Vue的初步使用
本项目的技术栈为Webpack+Vue.js+Vuex+ES6,与Vue.js框架配套的UI框架（iView框架），项目为组件化开发，构建工具使用Webpack完成。
1.环境配置
- NPM
Node.js的包管理器是NPM是全球足底啊的开源库生态系统，它集成在Node.js中，在安装Node.js的时候就已经自带NPM包管理工具。可以通过npm -v得到NPM的版本，如图
image.png
上图就说明你的环境已经安装成功了，如果没有安装就可以自行安装。下面来了解一下NPM常用命令。
- NPM
- 1.
npm install <Module Name> -g//安装模块，加不加"-g" 代表谁不会死全局安装 -
npm list <Module Name>// 查看某个模块的版本号
-
-
npm uninstall <Module Name>// 卸载模块
-
- 4.
npm update <Module Name>// 更新模块
NPM安装插件需要从国外服务器下载，受网络影响大，下载比较慢。我们可以安装CNPM来解决，安装方法如下
npm install -g cnpm --registry=https://registry.npm.taobao.org,安装成功后输入CNPM,如图
image.png
2. Vue-cli脚手架
-
单页面应用(
SPA)和多页面应用(MPA)
下面两图对SPA和MPA做了详细的对比
image.png
image.png Vue-cli安装
- 输入如下命令进行安装，
cnpm install vue-cli -g,如图说明安装成功
image.png
- 输入如下命令进行安装，
- 全局安装
Webpack,输入如下命令，cnpm insatll webpack -g,出现下图说明安装成功
image.png
- 全局安装
- 3.初始化一个项目，输入命令
vue init webpack <项目名称>,输入命令后会有一些交互，按照提示选择即可，命令交互含义如下，
1.
Project name如果输入就使用新的项目名，直接回车就使用vue init webpack之后的项目名称,这里我们一般回车
2.Project description项目的一些秒速，可以根据需求书写
3.Author作者
4.Vue build打包的方式，这里直接回车即可
5.Install vue-router?是否安装Vue路由，建议选择Yes，一般项目都会有路由
6.Use ESLint to lint your code?是否使用ESLint检测，建议不启用
7.Set up unit tests是否使用单元测试，建议选择不需要
8.Setup e2e tests with Nightwatch?是否需要端对端的检测，建议不需要
全部选择完成之后如下图，
vue-demo的项目,如图
- 安装依赖，进入项目路径，我这里是
cd vue-demo,然后使用cnpm install命令，如图
打开文件夹，我们会发现多了一个安装依赖.pngnode_modules的文件夹,安装的依赖都在这个文件夹里面 - 启动项目，输入
cnpm run dev,在浏览器中输入http://localhost:8080,出现如下界面说明项目启动成功
,image.png
6.用vscode打开看下目录结构-
src文件夹放置组件和入口文件
-
-
static文件夹放置静态资源文件
-
-
index.html为入口文件
详细的目录结构如下如，
详细的目录结构.png
-
三、模块化
关于架构设计，我们很多人都会想到MVC,MVP,MVVM,在这里我们使用分层架构设计，分层架构的优势主要有
- 1.易维护
- 2.可扩展
- 3.易服用
- 4.灵活性高
在使用分层架构的同时，我们不得不提到一个重要的技术----模块化。模块化是指解决一个复杂问题时自顶向下逐蹭把系统划分成若干模块的过程，有多重属性反映其内部特性，同时模块化还可以解耦实现并行开发。主要的模块化解决方案有 AMD(requirejs)
CMD(seajs)
ComonJS
-
ES6
模块化用来分割.组织和打包软件，我们这里使用es6进行开发，具体的架构如下图，
image.png
-
1.分离方式
关于分离方式的内容，首先要介绍分离方式的种类，主要有三种
-
不分离： 前后端共用一个项目目录，本地开发环境搭建成本高，项目比较复杂、不宜维护且维护成本高、发布风险高，不利于问题的定位和修改
-
-
部分分离：本地环境搭建成本较高，需要后端提供页面模板（jsp等)，更新和修改模板需要后端人员操作，效率低且不宜维护。
-
-
完全分离： 有分离开发集成部署和分离开发分离部署。这里使用第二种:分离开发分离部署。前端使用纯HTML通过接口的方式精心数据的交互，降低系统的复杂度，部署时部署到一台服务器上，使用代理进行数据的交互。
-
2.UI框架
这里先来分析一下UI框架的优点和缺点，
优点：
- 1.快速搭建Web页面
- 几种经理完成业务代码
-
- 缩短开发周期
缺点：
- 1.冗余代码
- 2.无法定制化、精细化开发
- 缩短开发周期
iView框架
iview框架是一套基于Vue.js的开源的UI组件库，主要服务于PC界面的中后台产品，有着高质量、功能丰富、细致、漂亮、定制性强等特点
安装方式如下，
cnpm install iview --save
具体用法：
- 在项目中引入
iview框架,这里是全局引用,代码如下main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter);
Vue.use(iView);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
- 在
HelloWorld.vue中使用iview的Button,代码如下，
<template>
<div class="hello">
<Button type="info">info按钮</Button>
</div>
</template>
type可以根据文档iview文档来修改，不同的type对应不容的按钮种类,info对应的按钮如图，
四、构建工具webpack
这里列举前端构建的几种又是
- 1.解决JavaScript和CSS的依赖问题
- 2.性能优化
- 效率提升(添加Css3前缀)
下面通过具体的案列来进行分析
- 效率提升(添加Css3前缀)
1.案列操作
- 创建一个
webpack1的文件夹用vscode打开，使用npm init进行初始化，会看到文件夹下生成一个package.json`的文件
- 创建一个
- 在
webpack文件加下，新建一个src文件夹，在src下新建一个index.js的文件
- 在
- 在index.js中写入
document.write("hello world");
- 4 在
webpack中新建一个index.html文件，写入代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="./build.js/main.js" charset="utf-8"></script>
</body>
</html>
- 运行
webpack ./src/index.js -o build.js,可以看到在webpack下生成了一个build.js的文件夹，
- 运行
- 6 用浏览器打开
index.html会看到hello wrold的字样,说明打包完成
五.总结
本文可能说的并不详细，但是身为一个前端新手，我也是从零开始摸索，路漫漫其修远兮，吾将上下而求索！
