目錄

項目搭建

項目生成目錄及說明

項目的其他配置

路由配置

---

項目搭建

新建文件夾，進入cmd創建vue項目

?練習vue2項目，勾選第一個進入下一步

項目生成目錄及說明

node_modules文件夾：項目依賴文件夾public文件夾：一般放置一些靜態資源（圖片），需要注意，放在public文件夾中的靜態資源，webpack進行打包的時候，會原封不動打包到dist文件夾中。src文件夾（程序員源代碼文件夾）assets文件夾：一般也是放置靜態資源（一般放置多個組件公用的靜態資源），需要注意，放置在assets文件夾里面靜態資源，在webpack打包的時候，webpack會把靜態資源當做一個模塊，打包在js文件里面。components文件夾：一般放置的是非路由組件（全局組件）App.vue 唯一的跟組件，Vue當中的組件（.vue)main.js:程序入口文件，也是整個程序當中最先執行的文件babel.config.js:配置文件（babel相關） package.json文件：認為是項目身份證，記錄項目名稱，有哪些依賴，項目如何運行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校驗功能關閉

為什么關閉eslint校驗功能

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

?如何關閉

在vue.config.js里配置

module.exports={//關閉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>

使用聲明式導航router-link

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

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

使用編程式導航$router.push|replace

search按鈕

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

?meta屬性

根據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:{// 搜索按鈕的回調函數：需要想search路由進行跳轉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}}] })

靜態組件搭建

axios使用

安裝axios?

npm install --save axios

將axios配置為request請求

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

統一管理api

// 當前這個模塊，api進行統一管理 import requests from './request';// 三級聯動接口 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={//關閉eslintlintOnSave:false,// 代理跨域devServer:{proxy:{'/api':{target:'http://gmall-h5-api.atguigu.cn',pathRewrite:{'^/api':''}}}}}

進度條使用

安裝包?

npm install --save nprogress

在網絡請求中使用進度條加載，在響應攔截器中使用

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

//引入進度條 import nProgress from "nprogress"; //引入進度條樣式 import "nprogress/nprogress.css";

在請求攔截器和響應攔截器中使用

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

安裝vuex

可能會報錯先執行?

npm install --save vuex

動態展示三級聯動數據

思路：

將typenav設置成全局組件，當頁面掛載typenav組件時，向服務器發送請求，獲取和展示數據?

typenav

import { mapState } from 'vuex'; export default {name: 'TypeNav',//組件掛載完畢，可以向服務器發請求mounted(){//通知vuex發請求，獲取數據，存儲于倉庫當中this.$store.dispatch('categoryList');},computed:{...mapState({// 右側需要的是一個函數，當使用這個計算屬性的時候，右側函數會立即執行一次// 注入一個參數state，即為大倉庫中的數據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中數據默認初始值categoryList:[], } const mutations={CATEGORYLIST(state,categoryList){state.categoryList = categoryList;} } const actions = {// 通過api里面的接口函數調用，向服務器發請求，獲取服務器的數據async categoryList({commit}){let res = await reqCategoryList();if(res.code==200){commit("CATEGORYLIST",res.data);}} } const getters={} export default{state,mutations,actions,getters }

?三級聯動添加背景色

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。