请选择 进入手机版 | 继续访问电脑版

极客蜗牛

查看: 181|回复: 4

VUE+webpack 初体验

[复制链接]

82

主题

99

帖子

651

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
651
QQ
发表于 2018-5-7 22:33:37 | 显示全部楼层 |阅读模式
回复

使用道具 举报

82

主题

99

帖子

651

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
651
QQ
 楼主| 发表于 2018-5-9 20:44:47 | 显示全部楼层
因网速关系,本次所有下载都使用 cnpm
cnpm 安装:
  1. npm install -g cnpm --registry=https://registry.npm.taobao.org
复制代码
1 安装webpack
  1. cnpm install webpack -g
复制代码
2 安装vue
  1. cnpm install vue
复制代码
3 安装vue-cli 脚手架
  1. cnpm install vue-cli -g
复制代码
4 使用脚手架初始化项目
  1. vue init webpack-simple projectName
复制代码
5 初始化成功后
  1. cd projectName
  2. cnpm install
  3. cnpm run dev
复制代码
到这里 架子就搭起来了。成功后会自动打开默认浏览器。
回复

使用道具 举报

82

主题

99

帖子

651

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
651
QQ
 楼主| 发表于 2018-5-9 20:48:01 | 显示全部楼层
安装CSS加载器

  1. cnpm install style-loader css-loader -g
复制代码
配置CSS加载器

webpack.config.js
  1. {
  2.   test: /\.css$/,
  3.   loader: 'style-loader!css-loader'
  4. },
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

82

主题

99

帖子

651

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
651
QQ
 楼主| 发表于 2018-5-11 20:52:27 | 显示全部楼层

vue-router

main.js中
  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import vueRouter from 'vue-router'
  4. import routerConfig from './router.config' //加载路由配置 router.config.js
  5. Vue.use(vueRouter);//使用vueRouter
  6. // console.log(routerConfig)
  7. const router = new vueRouter({
  8.   mode:'history',//设置这个模式后地址栏#号消失
  9.   routes:routerConfig//键名必须是routes
  10. })//创建router实例

  11. new Vue({
  12.   el: '#app',
  13.   router,//在根组件上使用router
  14.   render: h => h(App)
  15. })
复制代码


router.config.js  -->
  1. import Home_content from './component/Content.vue';//将要呈现的组件加载
  2. import Detail from './component/Detail.vue';
  3. export default[
  4.   {
  5.     path:'/home',
  6.     component:Home_content
  7.   },
  8.   {
  9.     path:'/arc/:id',
  10.     component:Detail
  11.   },
  12.   {
  13.     path:'/*',
  14.     redirect: '/home' //重定向
  15.   }
  16. ]
复制代码


App.vue  -->将此标签放到需要显示的地方
  1. <router-view></router-view>
复制代码



Nav.vue  -->class 为原li的  tag为替换的元素  active-class 为选中时的class
  1. <router-link tag="li" to="/home" id="menu-item-17" class="menu-item">
  2.     <a href="javascript:;">首页</a>
  3.                                     </router-link>
复制代码





回复

使用道具 举报

82

主题

99

帖子

651

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
651
QQ
 楼主| 发表于 2018-5-11 23:12:03 | 显示全部楼层

vue过渡动画

template 中 用transition标签包裹要过渡的组件
  1. <font size="3">  <transition name='slide_down'>

  2.       <router-view></router-view>

  3.                 </transition></font>
复制代码


在style中定义动画过程
注意: .slide_down-enter-active  必须与name='slide_down' 一致
  1. <font size="3"><style>
  2.     .slide_down-enter-active,
  3.     .slide_down-leave-active{
  4.       transition: .4s all ease;
  5.       opacity: 0.3;
  6.       transform: translate3d(0,30px,0);
  7.     }
  8.     .slide_down-enter,
  9.     .slide_down-leave{
  10.       opacity: 1;
  11.       transform: translate3d(0,30px,0)
  12.     }
  13. </style></font>
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|极客蜗牛

GMT+8, 2018-11-19 06:25 , Processed in 0.066314 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表