目錄

項目搭建

項目生成目錄及說明

項目的其他配置

路由配置

---

項目搭建

新建文件夾，進(jìn)入cmd創(chuàng)建vue項目

?練習(xí)vue2項目，勾選第一個進(jìn)入下一步

項目生成目錄及說明

node_modules文件夾：項目依賴文件夾public文件夾：一般放置一些靜態(tài)資源（圖片），需要注意，放在public文件夾中的靜態(tài)資源，webpack進(jìn)行打包的時候，會原封不動打包到dist文件夾中。src文件夾（程序員源代碼文件夾）assets文件夾：一般也是放置靜態(tài)資源（一般放置多個組件公用的靜態(tài)資源），需要注意，放置在assets文件夾里面靜態(tài)資源，在webpack打包的時候，webpack會把靜態(tài)資源當(dāng)做一個模塊，打包在js文件里面。components文件夾：一般放置的是非路由組件（全局組件）App.vue 唯一的跟組件，Vue當(dāng)中的組件（.vue)main.js:程序入口文件，也是整個程序當(dāng)中最先執(zhí)行的文件babel.config.js:配置文件（babel相關(guān)） package.json文件：認(rèn)為是項目身份證，記錄項目名稱，有哪些依賴，項目如何運行package-lock.json:緩存性文件，記錄依賴下載來源README.md：項目說明文件

項目的其他配置

配置運行項目時，瀏覽器自動打開

在package.json里配置 --open

"scripts": {"serve": "vue-cli-service serve --open","build": "vue-cli-service build","lint": "vue-cli-service lint"},

配置eslint校驗功能關(guān)閉

為什么關(guān)閉eslint校驗功能

如果不配置的話，校驗比較嚴(yán)格，當(dāng)編寫代碼時寫了一個暫時用不到的變量，運行時頁面會提示錯誤信息。

?如何關(guān)閉

在vue.config.js里配置

module.exports={//關(guān)閉eslintlintOnSave:false }

配置src文件夾的別名，用于簡寫

如何配置

在app根目錄新建jsconfig.json并配置

{"compilerOptions": {"baseUrl": "./","paths": {"@/*":["src/*"]}},"exclude": ["node_modules","dist"] }

安裝less

cnpm install --save less less-loader@5?

路由配置

安裝vue-router

npm install vue-router --save

新建四個組件Home、Login、Register、Search放入pages文件夾下

配置router.js

//配置路由的地方 import Vue from "vue"; import VueRouter from "vue-router"; //使用插件 Vue.use(VueRouter); //引入路由主鍵 import Home from '@/pages/Home' import Search from '@/pages/Search' import Login from '@/pages/Login' import Register from '@/pages/Register' //配置路由 export default new VueRouter({//配置路由routes:[{path:"/",component:Home},{path:"/search",component:Search},{path:"/login",component:Login},{path:"/register",component:Register}] })

?在main.js中引入路由

import Vue from 'vue' import App from './App.vue' //引入路由 import router from '@/router' Vue.config.productionTip = false new Vue({render: h => h(App),//注冊路由(kv一直省略v)router }).$mount('#app')

在App.vue中使用

<template><div id="app"><Header></Header><router-view></router-view><Footer></Footer></div> </template>

使用聲明式導(dǎo)航router-link

在header中用router-link代替a標(biāo)簽，router-link必須具有to屬性

<!-- 聲明式導(dǎo)航 --> <router-link to="/login">登錄</router-link> <router-link class="register" to="/register">免費注冊</router-link>

使用編程式導(dǎo)航$router.push|replace

search按鈕

<button class="sui-btn btn-xlarge btn-danger" type="button" @click="goSearch">搜索</button> export default {name:"",methods:{// 搜索按鈕的回調(diào)函數(shù)：需要想search路由進(jìn)行跳轉(zhuǎn)goSearch(){this.$router.push('./search')}} }

?meta屬性

根據(jù)meta屬性確定是否顯示Footer

在配置router時，添加meta屬性

//配置路由routes:[{path:"/",component:Home,meta:{show:true}},{path:"/search",component:Search,meta:{show:true}},{path:"/login",component:Login,meta:{show:false}},{path:"/register",component:Register,meta:{show:false}}]

App.vue里判斷是否顯示

<template><div id="app"><Header></Header><router-view></router-view><Footer v-show="$route.meta.show"></Footer></div> </template>

路由傳參

export default {name:"",data(){return{keyword:''}},methods:{// 搜索按鈕的回調(diào)函數(shù)：需要想search路由進(jìn)行跳轉(zhuǎn)goSearch(){this.$router.push({name:"search",params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}})}} } //配置路由 export default new VueRouter({//配置路由routes:[{path:"/",component:Home,meta:{show:true}},{path:"/search/:keyword",component:Search,meta:{show:true},name:"search"},{path:"/login",component:Login,meta:{show:false}},{path:"/register",component:Register,meta:{show:false}}] })

靜態(tài)組件搭建

axios使用

安裝axios?

npm install --save axios

將axios配置為request請求

// 為了使用請求和響應(yīng)攔截器，所以對axios二次封裝 import axios from "axios";// 利用axios對象的方法create，去創(chuàng)建一個axios實例 // request就是axios,只不過是多了一些配置 const requests = axios.create({// 基礎(chǔ)路徑baseURL:"http://39.98.123.211/api",// 代表請求超時時間是5stimeout:5000}) // 請求攔截器:在發(fā)送請求之前,請求攔截器可以監(jiān)測到,可以在請求發(fā)出去之前做一些事情 requests.interceptors.request.use((config)=>{// config:配置對象，對象里面有一個屬性很重要，header請求頭return config; }) // 響應(yīng)攔截器 requests.interceptors.response.use((res)=>{return res.data;},(error)=>{return Promise.reject(new Error('faile'));})// 對外暴露 export default requests;

統(tǒng)一管理api

// 當(dāng)前這個模塊，api進(jìn)行統(tǒng)一管理 import requests from './request';// 三級聯(lián)動接口 export const reqCategoryList = ()=> requests({url:'/product/getBaseCategoryList',method:'get'});

解決跨域

在main.js中引入使用會報跨域問題的BUG

import { reqCategoryList } from '@/api'; reqCategoryList();

解決辦法

在webpack.config.js或vue.config.js中配置

module.exports={//關(guān)閉eslintlintOnSave:false,// 代理跨域devServer:{proxy:{'/api':{target:'http://gmall-h5-api.atguigu.cn',pathRewrite:{'^/api':''}}}}}

進(jìn)度條使用

安裝包?

npm install --save nprogress

在網(wǎng)絡(luò)請求中使用進(jìn)度條加載，在響應(yīng)攔截器中使用

在封裝的request.js中引入和使用

//引入進(jìn)度條 import nProgress from "nprogress"; //引入進(jìn)度條樣式 import "nprogress/nprogress.css";

在請求攔截器和響應(yīng)攔截器中使用

// 請求攔截器:在發(fā)送請求之前,請求攔截器可以監(jiān)測到,可以在請求發(fā)出去之前做一些事情 requests.interceptors.request.use((config)=>{//進(jìn)度條加載nProgress.start();// config:配置對象，對象里面有一個屬性很重要，header請求頭return config; }) // 響應(yīng)攔截器 requests.interceptors.response.use((res)=>{//進(jìn)度條結(jié)束nProgress.done();return res.data;},(error)=>{return Promise.reject(new Error('faile'));})

安裝vuex

可能會報錯先執(zhí)行?

npm install --save vuex

動態(tài)展示三級聯(lián)動數(shù)據(jù)

思路：

將typenav設(shè)置成全局組件，當(dāng)頁面掛載typenav組件時，向服務(wù)器發(fā)送請求，獲取和展示數(shù)據(jù)?

typenav

import { mapState } from 'vuex'; export default {name: 'TypeNav',//組件掛載完畢，可以向服務(wù)器發(fā)請求mounted(){//通知vuex發(fā)請求，獲取數(shù)據(jù)，存儲于倉庫當(dāng)中this.$store.dispatch('categoryList');},computed:{...mapState({// 右側(cè)需要的是一個函數(shù)，當(dāng)使用這個計算屬性的時候，右側(cè)函數(shù)會立即執(zhí)行一次// 注入一個參數(shù)state，即為大倉庫中的數(shù)據(jù)categoryList:(state)=>state.home.categoryList})}}

頁面展示

<div class="sort"><div class="all-sort-list2"><div class="item" v-for="(c1,index) in categoryList" :key="c1.categoryId"><h3><a href="">{{c1.categoryName}}</a></h3><div class="item-list clearfix"><div class="subitem" v-for="c2,index in c1.categoryChild" :key="c2.categoryId"><dl class="fore"><dt><a href="">{{c2.categoryName}}</a></dt><dd><em v-for="c3,index in c2.categoryChild" :key="c3.categoryId"><a href="">{{c3.categoryName}}</a></em></dd></dl></div></div></div></div></div>

?

store/home

//home模塊的小倉庫 import { reqCategoryList } from "@/api" const state ={// state中數(shù)據(jù)默認(rèn)初始值categoryList:[], } const mutations={CATEGORYLIST(state,categoryList){state.categoryList = categoryList;} } const actions = {// 通過api里面的接口函數(shù)調(diào)用，向服務(wù)器發(fā)請求，獲取服務(wù)器的數(shù)據(jù)async categoryList({commit}){let res = await reqCategoryList();if(res.code==200){commit("CATEGORYLIST",res.data);}} } const getters={} export default{state,mutations,actions,getters }

?三級聯(lián)動添加背景色

通過js和css給一級分類添加背景色（不使用hover）

總結(jié)

以上是生活随笔為你收集整理的尚硅谷尚品汇学习笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。