VUE CLI環境搭建檔案
1.安裝Node.js
下載地址
https://nodejs.org/zh-cn/download/
2.全域安裝VUE CLI
win+R鍵打開運行cmd視窗輸入一下代碼，由于npm官方鏡像訪問網速問題，我們選擇使用淘寶的鏡像源
npm config set registry https://registry.npm.taobao.org
npm install -g @vue/cli
npm install -g @vue/cli-service-global
npm install -g @vue/cli-service
2.1 命令列
用法：create [options] <app-name>
創建一個由 `vue-cli-service` 提供支持的新專案
選項：
-p, --preset <presetName> 忽略提示符并使用已保存的或遠程的預設選項
-d, --default 忽略提示符并使用默認預設選項
-i, --inlinePreset <json> 忽略提示符并使用行內的 JSON 字串預設選項
-m, --packageManager <command> 在安裝依賴時使用指定的 npm 客戶端
-r, --registry <url> 在安裝依賴時使用指定的 npm registry
-g, --git [message] 強制 / 跳過 git 初始化，并可選的指定初始化提交資訊
-n, --no-git 跳過 git 初始化
-f, --force 覆寫目標目錄可能存在的配置
-c, --clone 使用 git clone 獲取遠程預設選項
-x, --proxy 使用指定的代理創建專案
-b, --bare 創建專案時省略默認組件中的新手指導資訊
-h, --help 輸出使用幫助資訊
2.2 可視化工具
vue ui
3.安裝Vue router
3.1 命令
npm install vue-router
3.2 修改main.js增加一下代碼，添加vue-router的參考
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
base: '/ap', //解決發布子站點后空白頁面的問題,如果發布在子站點或者子目錄中時，需要設定
mode: 'history',//路由模式：history為直接路由訪問，hash為#號方式（注：微信公眾號訪問中轉發hash模式存在截斷問題）
routes: routers //routers為router.js檔案中配置的路由
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
3.3 增加router.js檔案，并添加相關的路由設定內容
import Home from './components/HelloWorld.vue'
import defaults from './components/Default.vue'
const routers = [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/:id',//但斜杠為默認首頁路徑，可以通過冒號來設定對應的引數名稱，組件中可以通過$route.params.id來獲取對應的引數名稱
component: defaults
}
]
export default routers
3.4 修改App.Vue檔案，增加router-view組件
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
4.編譯環境配置
4.1 模式組態檔
.env # 在所有的環境中被載入
.env.local # 在所有的環境中被載入，但會被 git 忽略
.env.[mode] # 只在指定的模式中被載入
.env.[mode].local # 只在指定的模式中被載入，但會被 git 忽略
為一個特定模式準備的環境檔案的 (例如 .env.production) 將會比一般的環境檔案 (例如 .env) 擁有更高的優先級，
此外，Vue CLI 啟動時已經存在的環境變數擁有最高優先級，并不會被 .env 檔案覆寫，
4.2 環境變數
組態檔中的環境變數必須以VUE_APP_ 開頭，一個環境檔案只包含環境變數的“鍵=值”對
VUE_APP_APISERVER="http://127.0.0.1/api/"
4.3 模式
模式是 Vue CLI 專案中一個重要的概念，默認情況下，一個 Vue CLI 專案有三個模式：
- development 模式用于 vue-cli-service serve
- production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
- test 模式用于 vue-cli-service test:unit
4.4 使用環境變數
如需在 .js 檔案中使用則，在需要在檔案開頭引入vue物件
"use strict";
import Vue from 'vue';
在頁面可以通過process.env 來呼叫相應的環境變數，如：
console.log(process.env.VUE_APP_SECRET)
5 編譯
開發環境（此編譯對應development 模式，加載對應的 .env.development 組態檔）
npm run serve
生產環境（此編譯對應production 模式，加載對應的 .env.production 組態檔）
npm run build
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/156201.html
標籤：JavaScript
上一篇：Ajax基礎原理與應用
下一篇：控制臺測驗ajax