當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue学习【第六篇】：Vue-cli脚手架（框架）与实战案例

發布時間：2023/12/13 vue 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue学习【第六篇】：Vue-cli脚手架（框架）与实战案例小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

環境搭建

安裝node

官網下載安裝包，傻瓜式安裝：https://nodejs.org/zh-cn/

安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝腳手架

cnpm install -g @vue/cli

清空緩存處理

npm cache clean --force

項目的創建

創建項目

vue creat 項目名 // 要提前進入目標目錄(項目應該創建在哪個目錄下) // 選擇自定義方式創建項目，選取Router, Vuex插件

啟動/停止項目

npm run serve / ctrl+c // 要提前進入項目根目錄

打包項目

npm run build // 要在項目根目錄下進行打包操作

認識項目

項目目錄

dist: 打包的項目目錄(打包后會生成) node_modules: 項目依賴 public: 共用資源 src: 項目目標,書寫代碼的地方-- assets:資源-- components:組件-- views:視圖組件-- App.vue:根組件-- main.js: 入口js-- router.js: 路由文件-- store.js: 狀態庫文件 vue.config.js: 項目配置文件(沒有可以自己新建)

配置文件：vue.config.js

module.exports={devServer: {port: 8888} } // 修改端口,選做

main.js

new Vue({el: "#app",router: router,store: store,render: function (h) {return h(App)} })

.vue文件

<template> </template> <script>// 邏輯代碼區域// 該語法和script綁定出現export default {} </script> <style scoped>/* 樣式區域 *//* scoped表示這里的樣式只適用于組件內部, scoped與style綁定出現 */ </style>

項目功能

vue-router

{path: '/',name: 'home',// 路由的重定向redirect: '/home' }{// 一級路由, 在根組件中被渲染, 替換根組件的<router-view/>標簽path: '/one-view',name: 'one',component: () => import('./views/OneView.vue') }{// 多級路由, 在根組件中被渲染, 替換根組件的<router-view/>標簽path: '/one-view/one-detail',component: () => import('./views/OneDetail.vue'),// 子路由, 在所屬路由指向的組件中被渲染, 替換該組件(OneDetail)的<router-view/>標簽children: [{path: 'show',component: () => import('./components/OneShow.vue')}] }

<router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> | <router-link :to="{name: 'one'}">One</router-link> | <router-view />

a.router-link-exact-active {color: #42b983; }

// router的邏輯轉跳 this.$router.push('/one-view')// router采用history方式訪問上一級 this.$router.go(-1)

vuex

// 在任何一個組件中,均可以通過this.$store.state.msg訪問msg的數據 // state永遠只能擁有一種狀態值 state: {msg: "狀態管理器" }, // 讓state擁有多個狀態值 mutations: {// 在一個一個組件中,均可以通過this.$store.commit('setMsg', new_msg)來修改state中的msgsetMsg(state, new_msg) {state.msg = new_msg} }, // 讓mutations擁有多個狀態值 actions: {}

vue-cookie

// 安裝cookie的命令 // npm install vue-cookie --save // 為項目配置全局vue-cookie import VueCookie from 'vue-cookie' // 將插件設置給Vue原型,作為全局的屬性,在任何地方都可以通過this.$cookie進行訪問 Vue.prototype.$cookie = VueCookie

// 持久化存儲val的值到cookie中 this.$cookie.set('val', this.val) // 獲取cookie中val字段值 this.$cookie.get('val')

axios

// 安裝 axios(ajax)的命令 // npm install axios--save // 為項目配置全局axios import Axios from 'axios' Vue.prototype.$ajax = Axios

let _this = this this.$ajax({method: 'post',url: 'http://127.0.0.1:5000/loginAction',params: {usr: this.usr,ps: this.ps} }).then(function(res) {// this代表的是回調then這個方法的調用者(axios插件),也就是發生了this的重指向// 要更新頁面的title變量,title屬于vue實例// res為回調的對象,該對象的data屬性就是后臺返回的數據_this.title = res.data }).catch(function(err) {window.console.log(err) })

# 用pycharm啟動該文件模擬后臺 from flask import Flask, request, render_template from flask_cors import CORS app = Flask(__name__) CORS(app, supports_credentials=True)@app.route('/') def index():return "<h1>主頁</h1>"@app.route('/loginAction', methods=['GET', 'POST']) def test_action():# print(request.args)# print(request.form)# print(request.values)usr = request.args['usr']ps = request.args['ps']if usr != 'abc' or ps != '123':return 'login failed'return 'login success'if __name__ == '__main__':app.run()

import和require的區別

import一定要放在文件頂部，他相當于一個指針引用了文件，并沒有吧文件包含進來，需要調用文件時才引入 require可以吧文件放在任何位置，他是吧文件直接包含進來

設置文件路徑的流程

1）建立組件（.vue的文件） 2）配置路由（index.js文件中配置） 3）<router-link></router-link> 4)<router-view></router-view> 5)import 包名 from "組件路徑" 6)comonents進行注冊

實現異步加載

//異步 vue-resource:實現異步加載數據（已經棄用） axios：實現異步加載數據 npm install axios --save-dev npm install vue-axios --save-dev

VUE的生命周期

1、定義vue對象并實例化
2、執行created函數
3、編譯模板，只會編譯template的模板
4、吧HTML元素渲染到頁面當中
5、執行mounted函數，（加載）相當于onload
6、如果有元素的更新，就執行update函數
7、銷毀實例

項目實戰

仿抽屜網站

ALL.vue

1 <template>2 <div class='box'>3 <ul>4 <li v-for='item in arr'>5 <div class='p1'>6 <router-link :to="{path:'/detail',query:{ids:item.id}}">{{item.content}} </router-link>7 </div>8 <div class="p2">9 <img :src="item.imgUrl"> 10 </div> 11 </li> 12 13 </ul> 14 15 </div> 16 </template> 17 18 <script> 19 export default { 20 name: 'HelloWorld', 21 data () { 22 return { 23 arr: [] 24 } 25 }, 26 mounted () { 27 var url = '../../static/news.json' 28 var self=this; 29 this.$axios.get(url) 30 .then(function (response) { 31 console.log(response.data.result.data); 32 self.arr = response.data.result.data; 33 }) 34 .catch(function (error) { 35 console.log(error); 36 }) 37 } 38 } 39 </script> 40 41  42 <style scoped> 43 h1, h2 { 44 font-weight: normal; 45 } 46 47 ul { 48 list-style-type: none; 49 padding: 0; 50 } 51 52 li { 53 display: inline-block; 54 margin: 0 10px; 55 } 56 57 a { 58 color: #42b983; 59 } 60 .box{ 61 width: 980px; 62 } 63 .p1{ 64 float:left; 65 width:780px; 66 } 67 img{ 68 float:right; 69 } 70 </style> View Code

DETAIL.vue

1 <template>2 <div class="box">3 <h1>我是詳細頁面{{id}}</h1>4 <ul>5 <li>6 <div class="p1">7 {{obj.content}}8 </div>9 <div class="p2"> 10 <img :src="obj.imgUrl"> 11 </div> 12 13 </li> 14 </ul> 15 </div> 16 </template> 17 18 <script> 19 export default { 20 name: 'Detail', 21 data () { 22 return { 23 obj:{} , 24 id:this.$route.query.ids 25 } 26 }, 27 mounted(){ 28 var url = "../../static/news.json" 29 var self =this; 30 this.$axios.get(url,{ 31 params:{id:this.id} 32 }) 33 .then(function (response) { 34 //console.log(response.data.result.data); 35 self.obj = response.data.result.data[0]; 36 }) 37 .catch(function (error) { 38 console.log(error); 39 }) 40 } 41 } 42 </script> 43 44  45 <style scoped> 46 h1, h2 { 47 font-weight: normal; 48 } 49 50 ul { 51 list-style-type: none; 52 padding: 0; 53 } 54 55 li { 56 display: inline-block; 57 margin: 0 10px; 58 } 59 60 a { 61 color: #42b983; 62 } 63 .box{ 64 width: 980px; 65 } 66 67 .p1{ 68 float:left; 69 width:700px; 70 } 71 .p2{ 72 float:right; 73 } 74 </style> View Code

DUANZI.vue

1 <template>2 <div>3 <h1> 我是段子手</h1>4 </div>5 </template>6 7 <script>8 export default {9 name: 'HelloWorld', 10 data () { 11 return { 12 13 } 14 } 15 } 16 </script> 17 18  19 <style scoped> 20 h1, h2 { 21 font-weight: normal; 22 } 23 ul { 24 list-style-type: none; 25 padding: 0; 26 } 27 li { 28 display: inline-block; 29 margin: 0 10px; 30 } 31 a { 32 color: #42b983; 33 } 34 </style> View Code

NaveList.vue

1 <template>2 <div>3 <router-link to="/">首頁</router-link>4 <router-link to="/news">新聞</router-link>5 <router-link to="/duanzi">段子</router-link>6 </div>7 </template>8 9 <script> 10 export default { 11 name: 'HelloWorld', 12 data () { 13 return { 14 15 } 16 } 17 } 18 </script> 19 20  21 <style scoped> 22 h1, h2 { 23 font-weight: normal; 24 } 25 ul { 26 list-style-type: none; 27 padding: 0; 28 } 29 li { 30 display: inline-block; 31 margin: 0 10px; 32 } 33 a { 34 color: #42b983; 35 } 36 </style> View Code

NEWS.vue

1 <template>2 <div>3 <h1> 我是新聞</h1>4 5 </div>6 </template>7 8 <script>9 export default { 10 name: 'HelloWorld', 11 data () { 12 return { 13 14 } 15 } 16 } 17 </script> 18 19  20 <style scoped> 21 h1, h2 { 22 font-weight: normal; 23 } 24 ul { 25 list-style-type: none; 26 padding: 0; 27 } 28 li { 29 display: inline-block; 30 margin: 0 10px; 31 } 32 a { 33 color: #42b983; 34 } 35 </style> View Code

index.js

1 import Vue from 'vue'2 import Router from 'vue-router'3 import HelloWorld from '@/components/HelloWorld'4 import ALL from '@/components/All'5 import NEWS from '@/components/NEWS'6 import DUANZI from '@/components/duanzi'7 import Detail from '@/components/Detail'8 9 Vue.use(Router) 10 11 export default new Router({ 12 routes: [ 13 { 14 path: '/hw', 15 name: 'HelloWorld', 16 component: HelloWorld 17 }, 18 { 19 path: '/', 20 name: 'ALL', 21 component: ALL 22 }, 23 { 24 path: '/news', 25 name: 'NEWS', 26 component: NEWS 27 }, 28 { 29 path: '/duanzi', 30 name: 'duanzi', 31 component: DUANZI 32 }, 33 { 34 path: '/detail', 35 name: 'Detail', 36 component: Detail 37 }, 38 39 40 ] 41 }) View Code

App.vue

1 <template>2 <div id="app">3 <NavList></NavList>4 <router-view></router-view>5 </div>6 </template>7 8 <script>9 import NavList from './components/NavList' 10 export default { 11 name: 'App', 12 components: {NavList} 13 } 14 </script> 15 16 <style> 17 #app { 18 font-family: 'Avenir', Helvetica, Arial, sans-serif; 19 -webkit-font-smoothing: antialiased; 20 -moz-osx-font-smoothing: grayscale; 21 text-align: center; 22 color: #2c3e50; 23 margin-top: 60px; 24 } 25 </style> View Code

main.js

1 // The Vue build version to load with the `import` command2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.3 import Vue from 'vue'4 import App from './App'5 import router from './router'6 import axios from 'axios'7 import VueAxios from 'vue-axios'8 9 Vue.prototype.$axios = axios; 10 11 //Vue.use(axios, VueAxios) 12 //Vue.config.productionTip = false 13 14 /* eslint-disable no-new */ 15 new Vue({ 16 el: '#app', 17 router, 18 components: { App }, 19 template: '<App/>' 20 }) View Code

?項目需要注意的問題

問題一：在手動執行webpack?app/a.js?publicndle.js打包時出錯的解決方法需要修改為：?require("style-loader!css-loader!./style.css") 問題2：腳手架生成項目后，運行?npm?run?dev啟動項目后，
? ? ? ? ? ? ?如果想把地址欄中的??#去掉，如：http://localhost:8080/#/news，需要在
? ? ? ? ? ? ?router文件夾下的index.js文件中，加入?mode:?"history"

問題三：引入axios的2種方法：
　　　　需要在main.js中進行設置：這2種方法都可以，但引用順序不能翻轉。

轉載于:https://www.cnblogs.com/596014054-yangdongsheng/p/10228444.html

總結

以上是生活随笔為你收集整理的Vue学习【第六篇】：Vue-cli脚手架（框架）与实战案例的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： DHCP服务器出现的故障
下一篇：中国银行信用卡宽限期有多久？逾期有什么影