VUE CLI環境搭建文檔

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