Vue基礎筆記3

2022-02-20 11:03:00 字數 1013 閱讀 2624
環境

2）安裝cnpm

>:npm install -g cnpm --registry=

3）安裝腳手架

>:cnpm install -g @vue/cli

4）清空快取處理(如果第2、3補出問題可以執行該條命令)

>:npm cache clean --force

建立專案

專案目錄介紹

|vue-proj


|	|node_modules  專案依賴


|	|public


|	|	| 圖示、單頁面.html


|	|src


|	|	|assets  靜態檔案(img、css、js)


|	|	|components	 小組件


|	|	|views  頁面元件


|	|	|main.js  主指令碼檔案


|	|	|router.js  安裝vue-router外掛程式的指令碼檔案 - 配置路由的


|	|	|store.js  安裝vuex外掛程式的指令碼檔案 - 全域性倉庫 - 資料共享


|	|配置檔案們


|	|readme.md  關鍵命令說明
main.js

// import 別名 from '檔案(字尾可以省略)'


import vue from 'vue'


import router from './router'  // .代表相對路徑的當前路徑


import store from '@/store.js'  // @表示src絕對路徑


vue.config.productiontip = false;


// new vue(


render (fn) 


});
元件 .vue 檔案：模板(template) + 指令碼(scpirt) + 樣式(style)

vue基礎筆記

v 指令 v if，v else if,v else 根據條件是否插入元素 v for 迴圈 對資料進行迴圈遍歷，第一引數是值，第二個引數是下標 v for item in datas v for item,index in datas v show 是否顯示元素 v bind 繫結動態屬性，縮寫為...

Vue基礎筆記

而下面這樣寫會報錯！html js 定義乙個名為 button counter 的新元件 該形式是元件全域性註冊，vue例項在元件註冊後建立的都可以使用到該元件 vue.component button counter template you clicked me times.new vue ht...

vue基礎（部分3）

1 安裝 npm install vue router或cnpm install vue router或yarn add vue router 以上是三種安裝方式 推薦cnpm 或 yarn 2 在vue專案 src下新建router.js 然後在router.js中引用如下 import vue ...