继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

vue.js 2.0 - 快速开始组件化开发应用

albean
关注TA
已关注
手记 2
粉丝 4
获赞 20

全局安装vue + webpack + vue-cli

npm install -g vue       //全局安装vue
npm install -g webpack   //全局安装webpack
npm install -g vue-cli   //全局安装vue-cli

生成项目目录

vue init webpack projectName        //生成项目名为projectName的模板
  • 进入新生成的目录&安装依赖

  • 运行安装时特别注意:可以不用安装eslint,mocha等等依赖,因为大家都懂的原因特别慢,而且在编写代码时容易出现错误,让人摸不着头脑,所以建议初学不安装

  • 如下图

安装图


cd projectName                   // 进入新生成的目录  
// 注意运行安装命令式需要一次输入目录名称,描述,作者,eslint,mocha等
// 不用安装 eslint及后面的依赖 请选择 N
npm install                         // 安装依赖

npm run dev  // 运行开发即可自动打开浏览显示初始页面,热更新

npm run build // 运行构建生成生产环境可发布的代码

运行成功如下图

vue-welcome



使用基本路由用

  • 安装路由
npm install vue-router

配置路由

在main.js里面

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'

Vue.use(VueRouter);

const routes = [
  { path: '/',  redirect: '/index'},// 首页默认重定向至Index路由
  
  { path: '/test', component: resolve => require(['./components/test.vue'], resolve) }

  { path: '/index', component: resolve => require(['./components/index.vue'], resolve) }
 
];

const router = new VueRouter({
  routes // (缩写)相当于 routes: routes,
});

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

vue应用的基本目录

  • pages 是我自己增加的目录用来存储路由视图
例如 一个应用有首页,搜索页面,列表详情页就对应着有三个路由
首页   =>  index 路由
搜索页 => search 路由
列表页 => list 路由
所以pages文件夹里面对应着三个文件为index.vue,search.vue,list.vue
  • components 是组件库文件夹
例如 假如首页需要三个组件分别为轮播swipe组件,搜索栏组件,listView组件
那么我就需要在components里面增加三个组件

如果是大型项目就需要每个路由对应着一个组件文件夹 
index路由对应在components里面增加一个index文件夹专门用来存储Index路由里面的组件

  • 基本结构图

基本结构图

  • 路由组件图
    路由组件图

  • 效果图

酷我效果图

  • 谢谢大家

装逼结束

打开App,阅读手记
8人推荐
发表评论
随时随地看视频慕课网APP

热门评论

talk is cheap ,show me the code 

talk is cheap ,show me the code 

查看全部评论