个人写的一个框架 $ npm install learnvue
粗略的介绍一下这个项目 进入 learnve文件
执行 $ npm install $ npm start
项目的基本结构
简单介绍目录结构
├── index.html 入口页面
├── build 构建脚本目录
│ ├── build-server.js 运行本地构建服务器，可以访问构建后的页面
│ ├── build.js 生产环境构建脚本
│ ├── dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
│ ├── dev-server.js 运行本地开发服务器
│ ├── utils.js 构建相关工具方法
│ ├── webpack.base.conf.js wabpack基础配置
│ ├── webpack.dev.conf.js wabpack开发环境配置
│ └── webpack.prod.conf.js wabpack生产环境配置
├── config 项目配置
│ ├── dev.env.js 开发环境变量
│ ├── index.js 项目配置文件
│ ├── prod.env.js 生产环境变量
│ └── test.env.js 测试环境变量
├── mock mock数据目录
│ └── hello.js
├── package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── src 项目源码目录
│ ├── main.js 入口js文件
│ ├── app.vue 根组件
│ ├── components 公共组件目录
│ │ └── title.vue
│ ├── assets 资源目录，这里的资源会被wabpack构建
│ │ └── images
│ │ └── logo.png
│ ├── routes 前端路由
│ │ └── index.js
│ ├── store 应用级数据(state)
│ │ └── index.js
│ └── views 页面目录
│ ├── hello.vue
│ └── notfound.vue
├── static 纯静态资源，不会被wabpack构建。
└── test 测试文件目录(unit&e2e)
└── unit 单元测试
├── index.js 入口脚本
├── karma.conf.js karma配置文件
└── specs 单测case目录
└── Hello.spec.js ```
/*引入Vue框架*/
import Vue from 'vue'
/*引入资源请求插件*/
import VueResource from 'vue-resource'
/*重置样式*/
import "assets/css/base.css"
/*基本JS*/
import "assets/js/common.js"
/*引入路由设置*/
import "./routers.js"
/*使用VueResource插件*/
Vue.use(VueResource)
```
5.App.vue
这是一个标准的vue组件，包含三个部分，一个是模板，一个是script，一个是样式，这里需要了解vue的基础。
```
<template>
// 模板 必须 写到一个盒子里 <div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template>
<script>
//书写 js 文档 import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</script>
<style>
// 书写css 文档 #app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
```
官网路由中文手册
前端路由
在web开发中，路由是指根据url分配到对应的处理程序。
vue-router
作用:
通过管理url实现url和组件的对应，
通过url进行组件之间的切换
```
必须引入router组件 是单独文件
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view> </router-view>
</div>
```
## 自定义导航标签
tag="li"
tag="div"
<router-view tag="li"></router-view>
<router-link to="/user" tag="div" event="mouseover"> 用户</router-link>
<router-link to="/home" tag="li"> 主页</router-link>
<router-link to="/about" tag="li" active-class="lishuang-active"> 关于</router-link>
### 统一设置class 名字
new VueRouter({
mode: 'history',
linkActiveClass: 'active', //给所有导航统一设置class名字
单独给导航设置样式名字 写在<router-link active-class="lishuang-active">
active-class="lishuang-active"
### exact 精准匹配
当你把导航设置到 '/' 导航的激活样式 无论点击哪个都会匹配到跟，这是问题，
在导航里面添加 exact 就可以把这个问题解决
<router-link to="/" exact tag="li"> <a> 首页 </a></router-link> <span class="sr-only">(current)</span>
## 命名视图
在同级同时展示多个视图，而不是嵌套
```
<router-view class="text-center" name="slider"></router-view>
<router-view class="text-center"></router-view>
在路由里面写：
记住 component -> components
{
path: '/blog',
components: {
default:Blog,
slider:Slider
}
}
``` ### 动态路径
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。
那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』
space：
当这个页面是商品列表
点击这个列表进去商品详情
这个商品详情展示信息，就是通过某个商品的id 去请求api得到的数据。
这个id 怎么来呢？
space2：
当点击用户列表的时候 进入详情，需要根据url上面携带的id 来请求api数据
axios 使用
先安装 $ npm i axios vue-axios -D
在main.js 入口文件里面写
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,Axios)
在其它组件里面调用
export default {
name: 'blog',
created () {
this.getGoods()
},
methods: {
getGoods () {
this.$http.get('api 链接')
.then((res) => {
console.log(res.data)
})
.catch((error) => {
console.log(error)
})
}
}
}
jsonp的使用
$ npm install jsonp -D
var jsonp = require('jsonp');
jsonp('api 链接', null, function (err, data) {
if (err) {
console.error(err.message);
} else {
console.log(data);
}
});
怎么把css文件从vue文件里面抽离出来单独写？
把css文件建立在
src\assets\css\index.css
src\assets\css\common.css
src\assets\css\reset.css
在app.css 里面负责把其它的css引入
src\assets\css\app.css
content:
```
@import './index.css';
@import './common.css';
@import './reset.css';
```
在入口文件引入这个app.css
src\main.js //这个就是入口文件
import '@/assets/css/app.css' //如果不想加这个后缀css的话就去配置
import '@/assets/css/app'
怎么解决不加后缀自动匹配？
在webpack.base.conf.js 里面找到这个代码
extensions: ['.js', '.vue', '.json'],
这个扩展名，如果想让自己的css也识别就在这加上
extensions: ['.js', '.vue', '.json','.css'],
更改配置文件之后，要重启vue service
@是什么意思，很好奇？
在webpack.base.conf.js 里面找到这个代码
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
},
看到alias 这个别名 发现 '@': resolve('src'),突然明白
@ 就是代表路径 src
import '@/assets/css/app' 相当于 import 'src/assets/css/app'
vue配置jQuery
进入webpack.base.conf 配置
var webpack = require('webpack')
在 module.exports 内部插入
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json','.css'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'jquery': 'jquery'
}
},
plugins: [
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
],
在learnvue 文件里内容详解
Vue-resource实现ajax请求和跨域请求 安装 $ npm install vue-resource
引入方法
import VueResource from 'vue-resource';
Vue.use(VueResource)
this.$http.get("http://www.vrserver.applinzi.com/aixianfeng/apihome.php").then(function(res){
console.log(res)
})
我的这个没有引用 Vue-resource
进入main.js 引入全局变量
用 get 的请求方式
Vue 解决跨域问题
config 里 index.js 配置 跨域问题
进入 .eslintignore 检测无法的问题 解决 一些不必要的错误 就是一些空格规范 等 详情查看 Vue eslint
Vue 路由配置
在这里简单解释 详情 查看我写的 不是很好的 框架
在learnvue 文件中 src 下的 router 文件里 js文件配置的路由文件 在main.js里 用 import 方式引用 router 文件
首先引入router 配置插件
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Home from '@/views/home/index' //用import 的方法吧src下的views 文件里的home 文件里的index文件引入
import Seek from '@/views/seek/index'
require('../../node_modules/bootstrap/dist/css/bootstrap.min.css')
require('../../node_modules/bootstrap/dist/js/bootstrap.min.js')
export default new Router({
mode: 'history', // 取消域名后面默认的 # 号
routes: [
{
path: '/', //path 匹配路由
component: Home // 引入模板
},
{
path: '/home',
alias: '/index',
component: Home
},
// 匹配 错误路由
{
path: '*',
// component: NotFound, //重定向
redirect: (to) => {
// return '/home'
// console.log(to)
if (to.path === '/123') {
return '/home'
} else if (to.path === '/stark') {
return '/seek'
} else {
return '/shop'
}
}
}
]
})
设置对模板的引用 设置组件 引用components 文件中模板
package.json 利配置的所用插件
"autoprefixer": "^6.7.2",
"axios": "^0.16.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.10",
"babel-plugin-istanbul": "^4.1.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"bootstrap": "^3.3.7",
"jquery": "^3.2.1",
"jsonp": "^0.2.1",
"chai": "^3.5.0",
"chalk": "^1.1.3",
"chromedriver": "^2.27.2",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^4.0.0",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^2.0.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"inject-loader": "^3.0.0",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.30",
"karma-webpack": "^2.0.2",
"lolex": "^1.5.2",
"mocha": "^3.2.0",
"nightwatch": "^0.9.12",
"opn": "^4.0.2",
"optimize-css-assets-webpack-plugin": "^1.3.0",
"ora": "^1.2.0",
"phantomjs-prebuilt": "^2.1.14",
"rimraf": "^2.6.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"sinon": "^2.1.0",
"sinon-chai": "^2.8.0",
"url-loader": "^0.5.8",
"vue-awesome-swiper": "^2.5.4",
"vue-axios": "^2.0.2",
"vue-loader": "^12.1.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.3.3",
"webpack": "^2.6.1",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
插件的引用
例：轮播图的插件 安装 参考网站
$ npm install vue-awesome-swiper
<div class="swiper-pagination swiper-conter" slot="pagination"></div> //下标远点
<div class="swiper-scrollbar" slot="scrollbar"></div> //下方横条
当以上两个三除掉之后发现轮播图不动 或者报错 那么就注掉
下面这个类名
// js里设置横条
scrollbar: '.swiper-scrollbar',
// 默认的时间 可以注掉
mounted () {
// you can use current swiper instance object to do something(swiper methods)
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
// this.swiper.slideTo(0, 1000, false)
}
api 参数
// NotNextTick is a component's own property, and if notNextTick is set to true, the component will not instantiate the swiper through NextTick, which means you can get the swiper object the first time (if you need to use the get swiper object to do what Things, then this property must be true)
// notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
notNextTick: true,
// swiper configs 所有的配置同swiper官方api配置
autoplay: 1000, //设置间隔时间
direction: 'horizontal',
grabCursor: true,
setWrapperSize: true,
autoHeight: true,
pagination: '.swiper-pagination',
paginationClickable: true,
autoplayDisableOnInteraction: false,
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
keyboarControl: false,
loop: true, // 可循环
speed: 1500, // 运动速度
// if you need use plugins in the swiper, you can config in here like this
// 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
debugger: true,
扫一扫
1110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
