使用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