使用vue cli4快速搭建vue專案demo

使用vue-cli4快速搭建乙個可用作demo的專案。

無步驟如下：

全域性安裝vue指令包：npm install -g @vue/cli

安裝之後，你就可以在命令列中訪問vue命令。你可以通過簡單執行vue --version，看看是否列印出當前安裝的vue-cli版本號，來驗證它是否安裝成功。

使用vue create vue-demo建立乙個新專案

這時候會進入命令列互動介面，選擇第一項vueconfig配置項即可快速搭建簡單的vue專案。

此時通過npm run serve即可啟動vue專案。

我們在入庫檔案main.js引入import './assets/css/common.less'是無效的，當元件在使用common.less下的變數的時候，會提示undefined。

vue官方文件給出的解決方案是配置vue.config.js檔案使得每個vue檔案自動引入全域性less檔案。

步驟如下：

專案安裝less和less-loader

npm i less less-loader -d

在專案src同級目錄新建vue.config.js檔案，該檔案會會被@vue/cli-service自動載入。vue.config.js 檔案內容如下：

preprocessor: 為你新增外掛程式時選擇的語言。patterns: 全域性less檔案路徑。

module.exports = }};

// const path = require('path');

// const vconsoleplugin = require('vconsole-webpack-plugin'); // 引入 移動端模擬開發者工具 外掛程式 (另：
// const compressionplugin = require('compression-webpack-plugin'); //gzip
// const bundleanalyzerplugin = require('webpack-bundle-analyzer').bundleanalyzerplugin; //webpack包檔案分析器
// const baseurl = process.env.node_env === "production" ? "/static/" : "/"; //font scss資源路徑 不同環境切換控制
module.exports = 
open: false, //配置自動啟動瀏覽器 
hotonly: true, // 熱更新
// proxy: 'http://localhost:8000' // 配置跨域處理,只有乙個**
proxy: ,
"/xx2/*": ,}},
// 第三方外掛程式配置 
pluginoptions: }};

vueCli3以及vueCli4建立vue專案

1.首先解除安裝舊版本 npm npm uninstall vue cli g yarn yarn global remove vue cli2.更新node版本 需要8.9以上 3.安裝vue cli3 npm npm install g vue cli yarn yarn global add ...

Vue Cli4搭建Vue專案

npm install g vue cli檢視腳手架版本 隨後建立專案 vue create vue next test選擇第二個 選擇相應的配置，不要選擇linter不然會後悔的 下一步輸入y，然後選擇相應的css 然後在選擇第乙個 再輸入y，然後回車就完事了 1 npm install 2 np...

vue cli4 使用壓縮提高效能

開啟vue.config.js gzip壓縮配置 const compressionplugin require compression webpack plugin module.exports nginx http 還需開啟gzip 或使用後端spring 開啟 brotli壓縮配置 brotl...