vue項目搭建

時間 2019-12-19

標籤 vue 項目搭建简体版

原文原文鏈接

目錄css

補充

pip是什麼

至關於終端的應用商城，能夠找到你須要的資源而且進行下載html

pip list 打印你下載的全部資源前端

pip unstaill ‘資源包’ 卸載資源包vue

nmp

npm 至關於pipnode

安裝node產生npmpython

node是c++編寫的，執行jsc++

Vue-CLI 項目搭建

環境搭建

安裝node

node下載網站git

官網下載安裝包，傻瓜式安裝：https://nodejs.org/zh-cn/

安裝的時候只要修改一下安裝路徑就能夠（也能夠不修改），其餘的能夠不選es6

安裝完成後vuex

ctrl+c退出

nmp都是從國外的網站進行下載資源的，速度比較慢
安裝cnpm，換成國內的網站，讓速度加快
這一步是更換鏡像，讓咱們下載的速度比較快，

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

安裝腳手架
就像蓋房子同樣的腳手架，就是從這裏演示過來的
和django不一樣，安裝以後直接就會安裝好diango的腳手架
- 安裝完成後可在cmd中進行輸入vue查看vue的環境

cnpm install -g @vue/cli

清空緩存處理
上面安裝如何出現錯誤，終端安裝失敗時，能夠清空 npm緩存再重複執行失敗的步驟

npm cache clean --force

或者

cnpm cache clean --force

項目的建立

建立項目

會在當前目錄下進行建立，因此咱們要先進入本身想建立項目的路徑

vue create 項目名
// 要提早進入目標目錄(項目應該建立在哪一個目錄下)
/ 選擇自定義方式建立項目，選取Router, Vuex插件

選擇默認配置會直接進行安裝

下面選擇本身的配置

通常狀況下給出的選擇給出的大寫選擇，大寫選擇是推薦選擇

babel：在vue中採用es6語法，Babel框架就是把es6語言轉換成es5語言執行的框架

typescript:用ts語言來寫，咱們用原生的js

progressive：是一個前端的集合，技術集合，優化咱們的項目，就像su優化,

router：路由，把指定的鏈接請求分配到相應的界面

vuex：倉庫，用來存儲信息，全局的單列，在任何組件都額能拿到，能夠進行組件之間的傳參，通常不適用，存儲的時候瀏覽器不餓能刷新，刷新會重置

css：預處理器

linter/formatter:格式,給配置文件，格式化代碼

unit testing:測試腳本

E2E Testing：測試腳本

通常選擇router/vuex

檢查語法

ESLint與錯誤預防

只有ESLint + Airbnb配置默認配置

ESLint標準配置

ESLint +漂亮

採用某種已經有的配置，默認第一個

能夠不選擇語法檢測，避免語法檢測

配置文件的存儲問題

在接下來的選項中

與git有關

最後一個選擇是否保存本身的配置，而且下次下載的時候，會直接下載相同的配置

接下來下載項目依賴，完成項目的建立

啓動/中止項目

// 要提早進入項目根目錄
//啓動項目
npm run serve
或者
cnmp run serve

//中止項目
ctrl+c

network是局域網絡能夠訪問

打包項目

npm run build
// 要在項目根目錄下進行打包操做

建立項目第二種方式

vue ui
1.啓動一個socket，能夠進行建立，實現可視化建立

認識項目

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.config.js

module.exports={
    devServer: {
        port: 8888
    }
}
// 修改端口,選作

main.js

new Vue({
    el: "#app",
    router: router,
    store: store,
    render: function (h) {
        return h(App)
    }
})

.vue文件

<template>
    <!-- 模板區域 -->
</template>
<script>
    // 邏輯代碼區域
    // 該語法和script綁定出現
    export default {
        
    }
</script>
<style scoped>
    /* 樣式區域 */
    /* scoped表示這裏的樣式只適用於組件內部, scoped與style綁定出現 */
</style>

vue組件(.vue文件)

# 1) template：有且只有一個根標籤
# 2) script：必須將組件對象導出 export default {}
# 3) style: style標籤明確scoped屬性，表明該樣式只在組件內部起做用(樣式的組件化)

<template>
    <div class="test">
        
    </div>
</template>

<script>
    export default {
        name: "Test"
    }
</script>

<style scoped>

</style>

全局腳本文件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')

改寫

import Vue from 'vue'  // 加載vue環境
import App from './App.vue'  // 加載根組件
import router from './router'  // 加載路由環境
import store from './store'  // 加載數據倉庫環境

Vue.config.productionTip = false
new Vue({
    el: '#app',
    router,
    store,
    render: function (readFn) {
        return readFn(App);
    },
});