vue-loader
1>什么是Vue-loader? 其实是webpack的loader (webpack 模块打包工具)
2>Vue项目是基于webpack来搭建的
3创建Vue脚手架
npm install vue-clie -g
vue init webpack-simple [项目名称]
进入到项目目录 cd demo
安装项目依赖 npm install
运行项目 npm run dev
-------------------------------------------
文件结构
node_modules|====>项目依赖
src |=====> 项目的工作目录
|App.vue ====>入口文件
|main.js ===>vue 配置
|assets===>js/css/img等各种文件
index.html |===>项目入口
webpack.config.js |====》webpack 配置文件
package.json |====》下载的都会体现在这里
------------------------------------------
添加子组件到App.vue文件中 ---- 组件式开发
1.创建components文件夹存放组件文件的
2.在该文件夹下创建Home.vue文件
3.编写template组件内容
4.引入到App.vue文件中
在App.vue文件中template组件中添加子组件 HomeView
script中引入对应路径:import HomeView from './components/Home.vue'
在 new Vue({ ..., components:{ HomeView}}) 添加组件 HomeView是ES6写法 HomeView:组件名称:引入组件的路径import的名称
组件的使用:
样式局部 <strle scorped> scorped===>局部的样式
组件里的事件的添加
<template>
<div @click = "add">点击div</div>
</template>
<script>
export default{
methods:{ add:function(){alert(1)}}
}
</script>
-------------------------------------------------------------------
vue 路由
下载路径:在demo 目录下右键 git basic
cnpm install vue-router -s 或者 -d (dev) 下载的不是文件是下载的依赖
main.js ---引入vue-router
import VueRouter form ‘vue-router’
//第一种方式实现路由
//定义组件 /引入组件
import VueRouter from 'vue-router'
//console.log(VueRouter)
Vue.use(VueRouter)//多了一步脚手架需要
import HomeView from './components/HomeView.vue'
import NewsView from './components/NewsView.vue'
import MyView from './components/MyView.vue'
//配置路由
var routes = [
{path:"/home",component:HomeView},
{path:"/news",component:NewsView},
{path:"/my",component:MyView}
];
//实例化
var router = new VueRouter({
routes
});
new Vue({
//实例化挂载
router,
el: '#app',
render: h => h(App)
})
App.vue
<div>
<router-view></router-view>
</div>
<!--ul>li*3 +tab健快捷键 -->
<ul>
<li><router-link to="/home">首页</router-link></li>
<li><router-link to="/news">新闻</router-link></li>
<li><router-link to="/my">我的</router-link></li>
</ul>
------------------------------------------------------
第二种方式实现路由
1.在app.vue 组件中
template标签中添加 <router-view> 用于路由视图切换
添加ul>li*3 3列数据 ---》<router-link to="/home">
<ul>
<li><router-link to="/home">首页</router-link></li>
<li><router-link to="/news">新闻</router-link></li>
<li><router-link to="/my">我的</router-link></li>
</ul>
2.在main.js中添加路由的引用文件
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3.定义组件
在src下创建文件夹--->components(组件文件夹)--->router(表示路由组件文件夹)
创建组件文件:HomeView.vue / MyView.vue / MyView.vue--><template>
4.创建路由配置文件
在src下创建文件夹--->router(存放路由配置文件夹)
创建路由配置文件 router.config.js
//router 里所有配置 这里是路由的配置
import HomeView from '../components/router/HomeView.vue'
import NewsView from '../components/router/NewsView.vue'
import MyView from '../components/router/MyView.vue'
export default{
routes:[
{path:"/home",component:HomeView},
{path:"/news",component:NewsView},
{path:"/my",component:MyView}
]
}
5.在main.js中添加路由配置文件
import RouterConfig from './router/router.config.js'
6.实例化路由
var router = new VueRouter(RouterConfig)
7.挂载路由到Vue对象
new Vue({
//实例化挂载
router, ...})
运行 git basic
> npm run dev