Vue項目搭建

Vue項目需要自建服務器：node

1.用C++語言編寫，用來運行JavaScript語言
2.node可以為前端項目提供server (包含了socket)

先安裝node環境

直接百度node，進入nodejs官網，

下載長期支持版

下載好后直接安裝，一路點就行了

安裝好后，直接cmd里輸入node

出現尖括號就是裝好了

 

npm:包管理器 - 為node拓展功能的

安裝cnpm

 用npm可以下載模塊包npm install ...，和python的pip一樣的，下載也都是國外源，

把它改成國內源下載速度會快很多

管理員命令行輸入npm install -g cnpm --registry=https://registry.npm.taobao.org

 裝好后命令就是cnpm install  .... 

 

 vue cli環境：腳手架 - 命令行快速創建項目

cnpm install -g @vue/cli

如果報錯：npm cache clean --force 清空緩存處理再執行cnpm install -g @vue/cli

報錯一般都是網絡不行

裝好后就有vue環境了（此時vue還是國外源），輸入vue

創建Vue項目

1.cd 到目標目錄
2.創建項目：vue create 目錄名

 這是問你用不用淘寶鏡像，y用n不用，不用的話就是用國外源，這里選y

選擇第二個自定義

 

Babel：將ES6轉換為ES5識別

TypeScricpt：可以使用TypeScricpt

 Progressive Web App (PWA) Support：優化前端的功能體組合

Router：路由
Vuex：組件之間信息交互的
CSS Pre-processors：允許css組件可以采用nass，sass
Linter / Formatter:
 Unit Testing:測試用
 E2E Testing:測試用

 

 具體配置：上下鍵切換，空格鍵選擇，回車鍵進入下一步
1.第二個選項進入自定義配置
2.Babel jsES6語法轉換ES5，Router路由 Vuex組件數據交互 Formatter格式化代碼
3...有提示選擇大寫，沒提示默認第一個即可

 

以為vue是單頁面，不會所以就沒有頁面的歷史記錄，這個選yes可以幫你把頁面的組件跳轉當成歷史記錄一樣，說白了就是本來網頁上的左右箭頭一用就跳出去了，選yes后就不會了。

 

選擇格式化方式，選第一條默認格式化方式

 

選第一個

選第一個

下一次創建項目是不是直接按照這個設置創建

一定要選N

 

創建完成后

啟動項目

輸入這兩個指令，運行

 """ 終端啟動
1.進入項目：cd到項目目錄
2.啟動項目：npm run serve
"""

安裝vue.js插件，重啟，就可以在app.vue里面寫東西了

在命令行里ctrl+c刷新，兩次ctrl+c結束項目

 

pycharm啟動

點這個

 

 

注意是點Defaults，不要點+，設置好后apply ok

再

 

注意是點Defaults，不要點+，設置好后點aplly  ok

然后再到這里來點+，不要點Defaults，點npm（不好截圖）

然后

最上面一個untitled可以改項目名

 

點啟動

ok了

 

 

 項目目錄

 

 

 

快速創建項目

先直接建一個空文件夾取名為項目名比如v-project

再在里面只把下圖選中的復制進去

打開命令行 切到v-projiect目錄下

輸入 cnpm install跑完后

pycharm打開v-projiec

 

然后直接點+，npm，設置，ok

 

 

 

 

目錄文件詳解

"""
node_modules：依賴
public：共有資源
    ico：頁面標簽的logo
   index.html：單頁面 - 整個項目的唯一頁面
src：代碼主體
...：項目、插件等相關配置
"""

""" src
assets：靜態資源
components：小組件
views：視圖組件（和小組件沒有本質區別，只是在功能上強行區分開）
App.vue：根組件
main.js：主腳本文件
router.js：路由腳本文件 vue-router
store.js：倉庫腳本文件 vuex
"""

 

這就是那個單頁面index.html

 

 打開main.js

可以省略后綴，但也同時意味着不同的文件不能重名。

 

 

 

寫頁面，直接在views文件夾下新建.vue文件，

 

views里的視圖組件

style里面有scoped，意為這里的樣式只對這一個組件起作用，局部的

根組件App.vue就是全局的，它的style里面就沒有scopet

 

 

 在views下新建一個Main.vue

在根組件中渲染頁面組件

 在views下新建一個Main.vue

<!-- Main.vue 主頁組件 -->
<template>
    <div class="main">
        <h1>{{ title }}</h1>
    </div>
</template>

<script>
    export default {
        name: "Main",
        data: function () {
            return {
                title: '主頁'
            }
        }
    }
</script>

<style scoped>
    .main {
        height: 100vh;
        background-color: orange;
    }
    h1 {
        margin: 0;
        color: red;
    }
</style>

 

 

App.vue下

<!-- App.vue根組件 -->

<!-- App.vue根組件 -->
<template>
    <div id="app">
        <!-- 3.使用 -->
        <Main></Main>
    </div>
</template>
<script>
    // 1.導入
    import Main from '@/views/Main'
    export default {
        // 2.注冊
        components: {
            Main: Main
        }
    }
</script>
<style>
    html, body {
        margin: 0;
    }
</style>

 

 

路由：router.js

在根組件中設計轉跳頁面的導航欄

創建三個頁面組件

配置路由

前后台交互