Vue項目開發

Vue項目開發

python中下載模塊用自帶的 pip,C語言編寫,解釋執行python代碼css

node中安裝額外的功能用npm,相似於pip,c++語言編寫,解釋執行JavaScript語言的html

一、環境安裝

  1. 官網下載並安裝node,node中附帶了npmvue

  2. 換源:將npm換源爲cnpmnode

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

  3. 安裝vue腳手架c++

    cnpm install -g @vue/clivuex

注意:若是若是第二三步異常,基本都是由網絡致使的,能夠從新執行第二三步,若是一直有問題,能夠清理緩存後重復npm

清理緩存命令:npm cache clean --forcejson

二、項目建立:在cmd終端中建立

  1. 切換到目標路徑中瀏覽器

    E: 進入目標盤,cd E:\Python\vue 進入目標路徑

  2. 建立項目

    vue create 項目名

  3. 選擇自定義安裝環境,鍵盤上下鍵選擇移動,enter肯定,空格選擇

     

選擇的各插件做用:

  1. Babel:將ES6語法解析爲ES5語法給瀏覽器

  2. TypeScript:ts相對於js都基於ES(ECMAScript)開發的,js學習成本低,ts臉書,學習成本高

  3. Progressive Web App (PWA) Support:前臺優化機制

  4. Router:前臺路由

  5. Vuex:前臺倉庫,至關於單例,完成個組件間傳參的

  6. CSS Pre-processors:域編譯器,less和sass

  7. Linter/ Formatter:控制代碼書寫是否規範,好比須要這麼寫window.consloe.log()

三、項目移植:copy項目代碼時

  1. 拷貝出除了node_modules之外的文件與文件夾

  2. 打開cmd終端進入目標文件夾所在的位置

  3. 執行:npm install 從新構建依賴(npm能夠換成cnpm)

四、pycharm配置並啓動vue項目

 

 

五、vue項目目錄結構分析

├── 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等配置文件

六、vue組件(.vue文件)

pycharm安裝vue.js插件就能夠顯示高亮vue文件了

一、一個 .vue文件就是一個組件

二、組件由三部分組成:HTML結構、js邏輯、css樣式

  1. html結構寫在template標籤中,頁面結構有且只有一個根標籤,通常用div包起來

  2. js邏輯都是在script標籤中,必需要設置導出,export default {...}

  3. css樣式都在style標籤中,必須設置scoped屬性,是樣式組件化,防止不一樣組件用相同變量名沒法渲染

<template>
    <!-- 通常類名就是組件名-->
    <div class="first-cp">  
         <h1>第一個組件</h1>
    </div>
</template><script>
    // .vue文件相似於模塊,能夠直接相互導入,因此在組件內部要設置導出
    export default {
​
    }
</script><style scoped>
    /* scoped可使樣式組件化,只在本身內部起做用 */</style>

七、全局腳本文件 main.js (項目入口)

一、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中的佔位
    }
});

八、Vue的根組件(App.vue)

一、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被不一樣的頁面組件替換,就造成了不刷新網頁直接跳轉,由於都在同一個根組件下

九、Vue的路由配置 router

router目錄下的index,js就是vue的路由系統,控制着vue根組件中的佔位符<router-view />具體被哪一個組件渲染

導入組件:import 別名 from "文件路徑",@表示src文件夾

路由配置:

一、path:當用戶在瀏覽器中訪問路由是/或/about,router插件就好自動加載Home.vue或者About.vue文件,將加載的文件去替換App.vue文件中的router-view佔位符

二、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
    }
];

十、vue中的components目錄下的小組件

此目錄下寫的小組件,主要用於被組件使用,例如頁面的導航欄,不少個頁面都須要使用,那就可使用小組件拿過去使用

做爲子組件須要先在父組件中script中導入,註冊,在template中使用

案例:頁面組件渲染小組件

  1. 頁面組件做爲父組件: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>
  1. 導航欄小組件(封裝路由跳轉):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>
相關文章
相關標籤/搜索