python中下載模塊用自帶的 pip,C語言編寫,解釋執行python代碼css
node中安裝額外的功能用npm,相似於pip,c++語言編寫,解釋執行JavaScript語言的html
官網下載並安裝node,node中附帶了npmvue
換源:將npm換源爲cnpmnode
npm install -g cnpm --registry=https://registry.npm.taobao.orgpython
安裝vue腳手架c++
cnpm install -g @vue/clivuex
注意:若是若是第二三步異常,基本都是由網絡致使的,能夠從新執行第二三步,若是一直有問題,能夠清理緩存後重復npm
清理緩存命令:npm cache clean --forcejson
切換到目標路徑中瀏覽器
E: 進入目標盤,cd E:\Python\vue 進入目標路徑
建立項目
vue create 項目名
選擇自定義安裝環境,鍵盤上下鍵選擇移動,enter肯定,空格選擇
選擇的各插件做用:
Babel:將ES6語法解析爲ES5語法給瀏覽器
TypeScript:ts相對於js都基於ES(ECMAScript)開發的,js學習成本低,ts臉書,學習成本高
Progressive Web App (PWA) Support:前臺優化機制
Router:前臺路由
Vuex:前臺倉庫,至關於單例,完成個組件間傳參的
CSS Pre-processors:域編譯器,less和sass
Linter/ Formatter:控制代碼書寫是否規範,好比須要這麼寫window.consloe.log()
拷貝出除了node_modules之外的文件與文件夾
打開cmd終端進入目標文件夾所在的位置
執行:npm install 從新構建依賴(npm能夠換成cnpm)
├── v-proj
| ├── node_modules // 當前項目全部依賴,通常不能夠移植給其餘電腦環境
| ├── public
| | ├── favicon.ico // 標籤圖標
| | └── index.html // 當前項目惟一的頁面
| ├── src
| | ├── assets // 靜態資源img、css、js
| | ├── components // 小組件
| | ├── views // 頁面組件
| | ├── App.vue // 根組件
| | ├── main.js // 全局腳本文件(項目的入口)
| | ├── router
| | | └── index.js// 路由腳本文件(配置路由 url連接 與 頁面組件的映射關係)
| | └── store
| | | └── index.js// 倉庫腳本文件(vuex插件的配置文件,數據倉庫)
| ├── README.md
└ └── package.json等配置文件
pycharm安裝vue.js插件就能夠顯示高亮vue文件了
一、一個 .vue文件就是一個組件
二、組件由三部分組成:HTML結構、js邏輯、css樣式
html結構寫在template標籤中,頁面結構有且只有一個根標籤,通常用div包起來
js邏輯都是在script標籤中,必需要設置導出,export default {...}
css樣式都在style標籤中,必須設置scoped屬性,是樣式組件化,防止不一樣組件用相同變量名沒法渲染
<template> <!-- 通常類名就是組件名--> <div class="first-cp"> <h1>第一個組件</h1> </div> </template> <script> // .vue文件相似於模塊,能夠直接相互導入,因此在組件內部要設置導出 export default { } </script> <style scoped> /* scoped可使樣式組件化,只在本身內部起做用 */ </style>
一、main.js是項目的入口文件
二、new Vue() 就是建立根組件,用render讀取一個.vue組件,$mount渲染替換文件夾public下的index.html中的佔位div id="app"></div
三、項目所依賴的環境,好比vue環境、路由環境、數據倉庫環境、第三方環境、自定義環境都是在main.js中完成的
import Vue from 'vue' import App from './App.vue' // 根組件 import router from './router' import store from './store' Vue.config.productionTip = false; new Vue({ router, store, render: h => h(App) // 函數簡寫成箭頭函數 }).$mount('#app'); // 就是el: '#app'
改寫爲下面的這樣,其實,上面的就是由下面格式演變而來:
vue中的el選擇器同等於上面的.$mount('#app'),選中的是index.html中的 app。
上面是單個router其實就是下面的router: router簡寫的。(js中若是屬性名和變量名相 等能夠簡寫)
上面的箭頭函數等同於下面的function函數
通常咱們是將App.vue替換index.html中的佔位,但能夠本身定義,例以下面的替換成 了FirstCP.vue
通常狀況下,此文件咱們不須要作出改動,保持默認便可,使用上面默認便可, 不須要進行下面的修改,下面的修改只是爲了更好地理解上面的代碼。
import Vue from 'vue' // 加載vue環境 import App from './App.vue' // 加載根組件 import router from './router' // 加載路由環境 import store from './store' // 加載數據倉庫環境 Vue.config.productionTip = false; // tip小提示 import FirstCP from './views/FirstCP' new Vue({ el: '#app', router: router, store: store, render: function (readVueFn) { return readVueFn(FirstCP); // 讀取FirstCP.vue替換index.html中的佔位 } });
一、App.vue就是項目的根組件,是惟一由main.js加載渲染的組件,就是替換index.html 頁面中的 <div id="app"></div> 的佔位標籤
二、實際開發中只須要開始寫如下五行代碼便可,其餘的可額外添加
<template> <div id="app"> <!-- 前臺佔位符--> <!-- 此處會被vue組件替換並渲染,具體由誰替換由router/index.js中routes控制--> <router-view/> </div> </template> <style> body { margin: 0; } </style>
三、router-view就是一個佔位符,根據router/index.js配置的路由關係指定路徑匹配指定頁面組件渲染
四、router-view被不一樣的頁面組件替換,就造成了不刷新網頁直接跳轉,由於都在同一個根組件下
router目錄下的index,js就是vue的路由系統,控制着vue根組件中的佔位符<router-view />具體被哪一個組件渲染
導入組件:import 別名 from "文件路徑",@表示src文件夾
路由配置:
二、name:相似於反向解析,好比: <router‐link :to="{name: 'First'}">第一頁 </router‐link>
三、 component:註冊組件
四、redirect:路由的重定向
// import 別名 from '文件' import Home from '../views/Home' import About from '../views/About' import First from '../views/FirstCP' // 路由配置 // 1)當用戶在瀏覽器中訪問的路由是 / ,router插件就會加載 Home.vue文件,同理 /about 就是 About.vue文件 // 2)將加載的 Home.vue文件 或者 About.vue文件,去替換App.vue文件中的 <router-view />佔位符 // 3)用redirect配置來實現路由的重定向 const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/home', redirect: '/', // 路由的重定向 }, { path: '/about', name: 'About', component: About }, { path: '/first', name: 'First', component: First } ];
此目錄下寫的小組件,主要用於被組件使用,例如頁面的導航欄,不少個頁面都須要使用,那就可使用小組件拿過去使用
做爲子組件須要先在父組件中script中導入,註冊,在template中使用
頁面組件做爲父組件:views/*.vue
<template> <div class="home"> <!-- vue項目下的html是支持大小寫,且區分大小寫 --> <Nav /> </div> </template> <script> // 父組件加載子組件:父組件一般是頁面組件,是被一個個小組件這些子組件組裝成的頁面 // 1)導入語法要在 export default{} 之上完成 // 2)@符合標識 項目src文件夾 絕對路徑 // 3)要在export default{} 的括號中用 components 註冊 // 4)在該組件的模板中就能夠渲染子組件了(html代碼中是區別大小寫的) // 5)步驟:i)導入子組件 ii)註冊子組件 iii)使用子組件 import Nav from '@/components/Nav' export default { components: { Nav, } } </script> <style scoped> .home { width: 100vw; height: 100vh; background-color: orange; } </style>
導航欄小組件(封裝路由跳轉):components/*vue
<template> <div class="nav"> <img src="" /> <ul> <li> <!-- router控制的路由,不是用a標籤完成跳轉: 1)a標籤會刷新頁面,錯誤的 2)router-link標籤也能完成跳轉,且不會刷新頁面,就是router提供的a標籤(最終會被解析爲a標籤,仍是用a來控制樣式) 3)router-link標籤的to屬性控制跳轉路徑,由兩種方式 i) to="路徑字符串" ii :to="{name: '路由名'}" --> <a href="/">主頁</a> </li> <li> <router-link to="/about">關於頁</router-link> </li> <li> <!-- to="字符串",v-bind:to="變量",能夠簡寫爲 :to="變量" --> <router-link :to="{name: 'First'}">第一頁</router-link> </li> </ul> </div> </template> <style scoped> .nav { width: 100%; height: 80px; background: rgba(0, 0, 0, 0.3); } img { width: 200px; height: 80px; background: tan; float: left; } ul { float: left; list-style: none; margin: 0; padding: 0; height: 80px; background: pink; } ul li { float: left; height: 80px; padding: 30px 20px 0; } a { color: black; } </style>