使用vue2构建项目的完成流程Ⅰ

使用vue构建项目

---

项目介绍：本项目为vue2开发，旨在从零开始，完成构建项目的一个完整的流程，加深对vue的认识。本项目为一个手机新闻站点

1、基本流程总述

1、规划组件结构

Nav.vue
Header.vue
Home.vue
…

2、编写对应路由

vue-router

3、具体每个组件的功能

建议：一些公共文件jquery，一般放在index.html中引入

4、项目需要的模块

vuex
vue-router
axios

2、环境配置

在配置环境之前，首先确保电脑开发环境正常，可以进行测试，我的开发平台是mac，并且确保你的电脑vue-cli是可以用的。

vue−v node -v
$ npm -v

3、关于vue-cli

4、关于vue-router

前端路由->在web开发中，路由是指根据不同的url分配到对应的处理程序。
vue-router->通过管理url，实现url和组件的对应，和通过url进行组件之间的转换。

路由目前用于单页应用，SPA，进行加载单个HTML页面，并在用户于应用程序交互是，更新页面

使用步骤

1、安装模块

npm install vue-router –save

2、引入模块

import – VueRouter from ‘vue-router’

3、创建路由实例对象

new VueRouter({
..配置参数
})

4、注入Vue选项参数

new Vue({
router
})

5、告诉路由渲染的位置

<router-view></router-vier>

router-link配置：

可以在router-link间配置在前台显示的dom的原型（tag标签），例如：

<router-link :to="index" tag="div" active-class="class">    <i class="fa fa-home"></i>    <span>主页</span></router-link><router-view></router-vier>

router-link默认是点击事件，如果我们想改变他的触发方式，可以在router-link中添加event，event为预留配置项

<router-link event="mouseover"></router-link>

然后新建一个项目，在这里我使用的是webpack-simple这个脚手架

$ vue init webpack-simple vue_news_demo
cd vue_news_demo
npm install
npm run dev

在执行完成上述命令后，可以在浏览器中看到如下场景，证明项目环境构建成功。

然后进行相应的模块下载，

$ npm install vuex vue-router axios

然后环境已经构建成功可以进行页面的编辑了。

文件结构

vue-news-demo
|–node_modules ->模块
|–src
|–assets ->静态资源 img css js
|–components ->所有的组件

开发过程

如果想在js里面引入css模块，需要在webpack-comfig里面配置style-loader和css-loader,并且安装相应的loader
z