查看版本號
使用 Vue CLI 快速創建一個項目
項目創建
選擇默認環境
Default ([Vue 2] babel, eslint)完成安裝
運行程序進入vue-test文件下，打開命令行運行程序2.Vue常用基礎配置
配置環境變量
前端的環境變量跟正常系統裡的環境變量差不多，都是讓當前系統中能簡易的獲取到對應的信息（文件路徑、文件名稱等）
環境變量配置規則在項目根目錄（本文根目錄vueproject）下，新建環境變量配置文件
文件名規則.env #在所有的環境中被載入
.env.local #在所有的環境中被載入，但會被git忽略.env.[mode] #只在指定的模式中被載入.env.[mode].local #只在指定的模式中被載入，但會被git忽略文件內容（是以key-value形式 出現的鍵值對）
FOO=barVUE_APP_SECRET=secret環境加載屬性為一個特定模式準備的環境文件 (例如 .env.production) 將會比一般的環境文件 (例如 .env) 擁有更高的優先級。
此外，Vue CLI 啟動時已經存在的環境變量擁有最高優先級，並不會被 .env 文件覆寫
注意NODE_ENV
如果在環境中有默認的 NODE_ENV，你應該移除它或在運行 vue-cli-service 命令的時候明確地設置 NODE_ENV。3.Vue CLI三種模式
默認使用的模式development 模式用於 vue-cli-service serve
production 模式用於 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用於 vue-cli-service test:unit
設置模式模式不同於 NODE_ENV，一個模式可以包含多個環境變量。
也就是說，每個模式都會將 NODE_ENV 的值設置為模式的名稱——比如在 development 模式下 NODE_ENV 的值會被設置為 「development」。
你可以通過為 .env 文件增加後綴來設置某個模式下特有的環境變量。
比如，如果你在項目根目錄創建一個名為 .env.development 的文件，
那麼在這個文件裡聲明過的變量就只會在 development 模式下被載入。
你可以通過傳遞 --mode 選項參數為命令行覆寫默認的模式。
例如，如果你想要在構建命令中使用開發環境變量，請在你的 package.json 腳本中加入：
"dev-build" : "vue-cli-service build --mode development",4.配置伺服器
埠配置
在根目錄下新建vue.config.js文件
module.exports = { devServer: { port: 9010, }，}；代理（轉發）配置
在根目錄下vue.config.js文件添加新配置
module.exports = { devServer: { port: 9010, proxy: { "/api":{ target: "url", ws: true, changeOrigin: true, pathRewrite:{ '^/old/api':'/new/api' } }, "/foo":{ target:"otherUrl" } } }，}；其他配置https://webpack.docschina.org/configuration/dev-server/
（注意：
1.有些值像 host、port 和 https 可能會被命令行參數覆寫。
2.有些值像 publicPath 和 historyApiFallback 不應該被修改，因為它們需要和開發伺服器的 publicPath 同步以保障正常的工作。）5.配置webpack
配置生產環境下的壓縮資源插件安裝compression-webpack-plugi
npm i -D compression-webpack-plugi在根目錄下vue.config.js文件添加新配置
const CompressionPlugin = require("compression-webpack-plugi");module.exports = { devServer: { port: 9010, proxy: { "/api":{ target: "url", ws: true, changeOrigin: true, pathRewrite:{ '^/old/api':'/new/api' } }, "/foo":{ target:"otherUrl" } } }， configureWebpack: () => { if(process.env.NODE_ENV === "production"){ return{ plugins: [ new CompressionPlugin({ test: /\.js$|\.html$|\.css/, threshold: 1024, deleteOriginalAssets: false, }), ] } } }}；這個時候就可以運行 npm run build 構建看dist中是否有壓縮的資源
其他配置
https://www.webpackjs.com/configuration/plugins/#plugins
6.使用Antd組件庫
安裝
npm install ant-design-vue --save
引入Vue(兩種方式)
全部引入
注意：全部引入可能會造成很多組件沒有用到，卻要在構建的時候還要納入加載文件中，導致包比較大，不利於打包、構建、加載
第一步打開src文件夾下的main.js文件import Vue from 'vue'import App from './App.vue'new Vue({ render: (h) => h(App),}).$mount("#app")第二步引入antd包
import Vue from 'vue'import App from './App.vue'import Antd from 'ant-design-vue';Vue.config.productionTip = false;new Vue({ render: (h) => h(App),}).$mount("#app")第三步引入antd的css文件
import Vue from 'vue'import App from './App.vue'import Antd from 'ant-design-vue';import "ant-design-vue/dist/antd.css"Vue.config.productionTip = false;new Vue({ render: (h) => h(App),}).$mount("#app")第四步Vue使用Antd組件
import Vue from 'vue'import App from './App.vue'import Antd from 'ant-design-vue';import "ant-design-vue/dist/antd.css"
Vue.use(Antd);Vue.config.productionTip = false;new Vue({ render: (h) => h(App),}).$mount("#app")按需引入
下面登陸的例子裡用到了按鈕組件（Button）、表單組件（From）、輸入框（Input）、複選框（Checkbox）、圖標（Icon）、全局提示(message)
import Vue from 'vue'import App from './App.vue'import {Button, Form, Input, Checkbox, Icon, message} from 'ant-design-vue';import "ant-design-vue/dist/antd.css"
Vue.use(Button);Vue.use(Form);Vue.use(Input);Vue.use(Checkbox);Vue.use(Icon);Vue.prototype.$message = message;Vue.config.productionTip = false;new Vue({ render: (h) => h(App),}).$mount("#app")