个人写的一个框架 $ npm install learnvue
粗略的介绍一下这个项目 进入 learnve文件
执行 $ npm install $ npm start
项目的基本结构
简单介绍目录结build目录是一些webpack的文件,配置参数什么的,一般不用config是vue项目的基本配置文件 node_modules是项目中安装的依赖模块 src源码文件夹,基本上文件都应该放在这里。 —assets 资源文件夹,里面放一些静态资源 —components这里放的都是各个组件文件 —App.vue App.vue组件 —main.js入口文件 static生成好的文件会放在这个目录下。 test测试文件夹,测试都写在这里 .babelrc babel编译参数,vue开发需要babel编译 .editorconfig 看名字是编辑器配置文件,不晓得是哪款编辑器,没有使用过。 .gitignore 用来过滤一些版本控制的文件,比如node_modules文件夹 index.html 主页 package.json 项目文件,记载着一些命令和依赖还有简要的项目描述信息 README.md 介绍自己这个项目的,想怎么写怎么写。不会写就参照github上star多的项目,看人家怎么写的package.jso dependencies:项目发布时的依赖 devDependencies:项目开发时的依赖
scripts:编译项目的一些命令 .babelrc文件定义了ES6的转码规则,基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码。 这里是入口文件,可以引入一些插件或静态资源,当然引入之前要先安装了该插件,在package.json文件中有记录。 ``` /*引入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
var webpack = require(‘webpack‘) 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" }) ],
时间: 2024-10-13 23:29:04