Vue項目開發

Vue項目開發

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

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

一、環境安裝

1. 官網下載並安裝node，node中附帶了npm

2. 換源：將npm換源爲cnpm

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

3. 安裝vue腳手架

   cnpm install -g @vue/cli

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

清理緩存命令：npm cache clean --force

二、項目建立：在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>

2. 導航欄小組件(封裝路由跳轉)：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>