當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

Vue学习（常用实例、脚手架搭建）-学习笔记

發(fā)布時(shí)間：2024/1/23 vue 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue学习（常用实例、脚手架搭建）-学习笔记小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

- Vue學(xué)習(xí)（常用實(shí)例、腳手架搭建）-學(xué)習(xí)筆記
- - 實(shí)例1
  - - 法1
    - 法2
  - 實(shí)例2
  - 腳手架搭建
  - - vue-cli2.0
    - vue-cli4.0

Vue學(xué)習(xí)（常用實(shí)例、腳手架搭建）-學(xué)習(xí)筆記

附加：阿里巴巴矢量圖庫(kù)：https://www.iconfont.cn/

實(shí)例1

法1

* {padding: 0px;margin: 0px; } ul {list-style-type: none; }a {color: #333;text-decoration: none; } body {font-size: 14px;background-color: #f9f9f9; } body,html{width:100%;height:100%; } .tree {width: 200px;height: 100%;background: #fff; } .tree> ul {height: 100%; } .p_title {color: #333;display: block;padding: 15px; cursor:pointer;border-bottom: 1px solid #f1f1f1; } .selected {color: #1890ff;border-bottom: 1px solid #1890ff; } .p_title> i{padding-right:10px; } .p_title b{float: right;transition:all ease 1s; } .down {transform:rotate(180deg) } .up {transform:rotate(0deg) } .p_title:hover {color: #1890ff;border-bottom: 1px solid #1890ff; }.c_item a {display: block;padding: 10px 20px 10px 40px;background: #fff;color: #333;cursor:pointer; }.c_item a:hover {color: #1890ff;background: #e6f7ff;border-right: 4px solid #1890ff; } <!DOCTYPE html> <html> <head><meta charset="utf-8"/><title>導(dǎo)航目錄</title><link rel="stylesheet" type="text/css" href="css/index.css"><link rel="stylesheet" href="font/iconfont.css"><script src='js/vue.js'></script><script src='js/index.js'></script> </head> <body><div class="tree" id='my'><ul><li class="p_item" v-for="(v,i) in items" :key="i"><a class="p_title" @click="flagChange(v)" :class="v.flag?'selected':''"><i class="iconfont" :class="v.icon"></i>{{v.name}}<b :class="v.flag ?'down':'up'">^</b></a><ul class="c_item" v-show="v.flag"><li v-for="(sub,j) in v.subItems" :key="j"><a>{{sub.name}}</a></li></ul></li></ul></div> </body> </html> window.onload = function(){new Vue({el:"#my",data:{items:[{name:'服飾類(lèi)',icon:'icon-shenghuo',flag:true,subItems:[{name:'服飾類(lèi)1'},{name:'服飾類(lèi)2'},{name:'服飾類(lèi)3'}]},{name:'運(yùn)動(dòng)類(lèi)',icon:'icon-biaoqingleiben',flag:false,subItems:[{name:'運(yùn)動(dòng)類(lèi)1'},{name:'運(yùn)動(dòng)類(lèi)2'},{name:'運(yùn)動(dòng)類(lèi)3'}]}]},methods:{flagChange(v){// v.flag = !v.flag;this.items.forEach(function(item){item.flag = false;});v.flag = true;}}}) }

法2

<!DOCTYPE html> <html> <head><meta charset="utf-8"/><title>導(dǎo)航目錄</title><link rel="stylesheet" type="text/css" href="css/index.css"><link rel="stylesheet" href="font/iconfont.css"><script src='js/vue.js'></script><script src='js/axios.js'></script><script src='js/index2.js'></script> </head> <body><div class="tree" id='my'><ul><li class="p_item" v-for="(v,i) in items" :key="i"><a class="p_title" @click="n=i" :class="n==i?'selected':''"><i class="iconfont" :class="v.icon"></i>{{v.name}}<b :class="n==i?'down':'up'">^</b></a><ul class="c_item" v-show="n==i"><li v-for="(sub,j) in v.subItems" :key="j"><a>{{sub.name}}</a></li></ul></li></ul></div> </body> </html> window.onload = function(){new Vue({el:"#my",data:{n:1,items:[{name:'服飾類(lèi)',icon:'icon-shenghuo',subItems:[{name:'服飾類(lèi)1'},{name:'服飾類(lèi)2'},{name:'服飾類(lèi)3'}]}]},methods:{getData(){axios({method:'get',url:'http://127.0.0.1:3333/get_lists'}).then(res=>{console.log(res);this.items = res.data.result;}).catch(function(){})}},mounted(){this.getData();}}) }

實(shí)例2

* {padding: 0px;margin: 0px; } ul {list-style-type: none; } a {text-decoration: none; } body,html{width:100%;height:100%; } .panel-height {height: 310px;overflow-y: scroll; } .panel-height li {cursor:default;background: #f9f9f9;display: inline-block;border: 1px solid #d6e9c6;margin: 5px;padding: 5px 15px;position:relative; } .panel-height li:hover {border: 1px solid #3c763d; } .panel-height li span.del{position:absolute;color:#999;right:3px;top:-3px; } .panel-height li span.del:hover{color:#f60; } .panel-height li.selected {color:#f60;background: #d6e9c6;border: 1px solid #3c763d; } <!DOCTYPE html> <html> <head><meta charset="utf-8"/><title>多項(xiàng)選擇框</title><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/><link rel="stylesheet" type="text/css" href="css/index.css"><script src='js/vue.js'></script><script src='js/index.js'></script> </head> <body><div id='my'><div class="container"> <div class="row"><div class="col-xs-6 col-sm-6" ><div class="panel panel-success"><div class="panel-heading"><h3 class="panel-title">省份({{leftData.length}}) / 當(dāng)前選中({{rightData.length}})</h3></div><div class="panel-body panel-height"><ul><li v-for="(v,i) in leftData" :key="v.id":class="v.flag?'selected':''"@click="add(v)">{{v.name}}</li></ul></div></div></div><div class="col-xs-6 col-sm-6" ><div class="panel panel-success"><div class="panel-heading"><h3 class="panel-title">已選擇省份({{rightData.length}})</h3></div><div class="panel-body panel-height"><ul ><li v-for="(v,i) in rightData" :key="v.id"@mouseover="state=i"@mouseout="state='hide'">{{v.name}}<span class="del" v-show="state==i" @click="del(v,i)">x</span></li></ul></div></div></div> </div></div></div></body> </html> window.onload = function(){new Vue({el:"#my",data:{n:1,leftData:[{name:'北京1',id:1,flag:false},{name:'北京2',id:2,flag:false},{name:'北京3',id:3,flag:false},{name:'北京4',id:4,flag:false},{name:'北京5',id:5,flag:false},{name:'北京6',id:6,flag:false},{name:'北京7',id:7,flag:false},{name:'北京8',id:8,flag:false},{name:'北京9',id:9,flag:false}],rightData:[],state:'hide' //顯示與隱藏},methods:{add(v){ //添加數(shù)據(jù)v.flag = true;//去重// for(var i=0;i<this.rightData.length;i++){// if(v.id == this.rightData[i].id) return;// };this.rightData.push(v);this.rightData = [...new Set(this.rightData)];},del(v,i){this.rightData.splice(i,1);this.leftData.forEach(item=>{if(v.id == item.id){item.flag = false;}})}}}) }

腳手架搭建

vue-cli2.0

需要先了解：

Html
Css
Javascript
Node.js 環(huán)境（npm包管理工具）
Webpack 自動(dòng)化構(gòu)建工具

一、安裝node.js

進(jìn)入官網(wǎng)下載node.js : https://nodejs.org/en/

二、安裝 cnpm

1、說(shuō)明：npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安裝、卸載、管理依賴(lài)等）；
2、使用npm安裝插件：命令提示符執(zhí)行npm install
3、選裝 cnpm 因?yàn)閚pm安裝插件是從國(guó)外服務(wù)器下載，受網(wǎng)絡(luò)影響大，可能出現(xiàn)異常，如果npm的服務(wù)器在中國(guó)就好了，所以我們樂(lè)于分享的淘寶團(tuán)隊(duì)干了這事！來(lái)自官網(wǎng)：“這是一個(gè)完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘一次以保證盡量與官方服務(wù)同步。”;

安裝：npm install -g cnpm --registry=https://registry.npm.taobao.org
輸入cnpm -v，可以查看當(dāng)前cnpm版本

三、安裝vue-cli腳手架構(gòu)建工具

vue-cli 提供一個(gè)官方命令行工具，可用于快速搭建大型單頁(yè)應(yīng)用。該工具提供開(kāi)箱即用的構(gòu)建工具配置，帶來(lái)現(xiàn)代化的前端開(kāi)發(fā)流程。只需幾分鐘即可創(chuàng)建并啟動(dòng)一個(gè)帶熱重載、保存時(shí)靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項(xiàng)目：
安裝：$ cnpm install vue-cli –g //g表示全局安裝
安裝完成之后輸入 vue -V（注意這里是大寫(xiě)的“V”），如下圖，如果出現(xiàn)相應(yīng)的版本號(hào)，則說(shuō)明安裝成功。

四、創(chuàng)建一個(gè)基于webpack模板的新項(xiàng)目

要?jiǎng)?chuàng)建項(xiàng)目，首先我們要選定目錄，然后再命令行中把目錄轉(zhuǎn)到選定的目錄。可以使用：

$ vue init webpack my-app // my-app為自定義項(xiàng)目名

運(yùn)行初始化命令的時(shí)候回讓用戶(hù)輸入幾個(gè)基本的選項(xiàng)，如項(xiàng)目名稱(chēng)，描述，作者等信息，如果不想填直接回車(chē)默認(rèn)就好

Project name (my-app) # 項(xiàng)目名稱(chēng)（我的項(xiàng)目） Project description (A Vue.js project) # 項(xiàng)目描述一個(gè)Vue.js 項(xiàng)目 Author 作者（你的名字） Install vue-router? (Y/n) # 是否安裝Vue路由，也就是以后是spa（但頁(yè)面應(yīng)用需要的模塊） Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代碼？（Y [ yes ] / N [ no ]） Pick an ESLint preset (Use arrow keys) # 選擇一個(gè)預(yù)置ESLint（使用箭頭鍵） Setup unit tests with Karma + Mocha? (Y/n) # 設(shè)置單元測(cè)Karma + Mocha？（Y/ N） Setup e2e tests with Nightwatch? (Y/n) # 設(shè)置端到端測(cè)試，Nightwatch？（Y/ N）

注：當(dāng)然這些都看你自己個(gè)人的情況

五、運(yùn)行項(xiàng)目

$ cnpm run dev

運(yùn)行成功后，瀏覽器直接顯示的是頁(yè)面如下：

六、安裝項(xiàng)目所需要的依賴(lài)
剛初始化的項(xiàng)目是沒(méi)有依賴(lài)的，如果運(yùn)行會(huì)報(bào)類(lèi)似這樣的錯(cuò)誤，輸入命令

$ cnpm install

vue-cli4.0

三、安裝vue-cli腳手架構(gòu)建工具

vue-cli 提供一個(gè)官方命令行工具，可用于快速搭建大型單頁(yè)應(yīng)用。

1、先確認(rèn)是否有安裝過(guò)vue-cli
vue -V //如有的話(huà)，就用下面命令卸載

輸入命令： cnpm install -g @vue/cli

指定版本:
如是3.0以下

npm install -g vue-cli@版本號(hào)

如是3.0以上

npm install -g @vue/cli@版本號(hào)

四、創(chuàng)建項(xiàng)目

vue create 項(xiàng)目名稱(chēng)

空格選擇對(duì)應(yīng)需要的插件

五、啟動(dòng)項(xiàng)目

總結(jié)

以上是生活随笔為你收集整理的Vue学习（常用实例、脚手架搭建）-学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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

上一篇： Vue学习（入门实例、常用指令）-学习笔
下一篇： Vue学习（增删改查、ES6模块化概念）