VUE 配置和基本方法的應用
阿新 • • 發佈：2017-07-19
12px 商品列表 sets config err emp har 別名 單獨
個人寫的一個框架 $ 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
[email protected]，很好奇？
在webpack.base.conf.js 裏面找到這個代碼
resolve: {
extensions: [‘.js‘, ‘.vue‘, ‘.json‘],
alias: {
‘vue$‘: ‘vue/dist/vue.esm.js‘,
[email protected]: resolve(‘src‘)
}
},
看到alias 這個別名 發現 [email protected]: 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‘,
[email protected]: resolve(‘src‘),
‘jquery‘: ‘jquery‘
}
},
plugins: [
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
],
VUE 配置和基本方法的應用