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

vue

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

發布時間：2024/1/23 vue 17 豆豆

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

文章目錄

- Vue學習（常用實例、腳手架搭建）-學習筆記
- - 實例1
  - - 法1
    - 法2
  - 實例2
  - 腳手架搭建
  - - vue-cli2.0
    - vue-cli4.0

Vue學習（常用實例、腳手架搭建）-學習筆記

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

實例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>導航目錄</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:'服飾類',icon:'icon-shenghuo',flag:true,subItems:[{name:'服飾類1'},{name:'服飾類2'},{name:'服飾類3'}]},{name:'運動類',icon:'icon-biaoqingleiben',flag:false,subItems:[{name:'運動類1'},{name:'運動類2'},{name:'運動類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>導航目錄</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:'服飾類',icon:'icon-shenghuo',subItems:[{name:'服飾類1'},{name:'服飾類2'},{name:'服飾類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();}}) }

實例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>多項選擇框</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}}) / 當前選中({{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){ //添加數據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 環境（npm包管理工具）
Webpack 自動化構建工具

一、安裝node.js

進入官網下載node.js : https://nodejs.org/en/

二、安裝 cnpm

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

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

三、安裝vue-cli腳手架構建工具

vue-cli 提供一個官方命令行工具，可用于快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需幾分鐘即可創建并啟動一個帶熱重載、保存時靜態檢查以及可用于生產環境的構建配置的項目：
安裝：$ cnpm install vue-cli –g //g表示全局安裝
安裝完成之后輸入 vue -V（注意這里是大寫的“V”），如下圖，如果出現相應的版本號，則說明安裝成功。

四、創建一個基于webpack模板的新項目

要創建項目，首先我們要選定目錄，然后再命令行中把目錄轉到選定的目錄。可以使用：

$ vue init webpack my-app // my-app為自定義項目名

運行初始化命令的時候回讓用戶輸入幾個基本的選項，如項目名稱，描述，作者等信息，如果不想填直接回車默認就好

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

注：當然這些都看你自己個人的情況

五、運行項目

$ cnpm run dev

運行成功后，瀏覽器直接顯示的是頁面如下：

六、安裝項目所需要的依賴
剛初始化的項目是沒有依賴的，如果運行會報類似這樣的錯誤，輸入命令

$ cnpm install

vue-cli4.0

三、安裝vue-cli腳手架構建工具

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

1、先確認是否有安裝過vue-cli
vue -V //如有的話，就用下面命令卸載

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

指定版本:
如是3.0以下

npm install -g vue-cli@版本號

如是3.0以上

npm install -g @vue/cli@版本號

四、創建項目

vue create 項目名稱

空格選擇對應需要的插件

五、啟動項目

總結

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

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

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