使用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
給你的專案新增外掛程式vue add style-resources-loader
執行後會在命令列讓你選擇需要預處理的語言:有less,sass,scss等,這裡我們選擇less。也就是我們之後再vue.config.js中preprocessor
對應的值。
在專案src同級目錄新建vue.config.js
檔案,該檔案會會被@vue/cli-service
自動載入。vue.config.js 檔案內容如下:
preprocessor
: 為你新增外掛程式時選擇的語言。patterns
: 全域性less檔案路徑。
module.exports = }};
然後就可以在各個vue檔案中使用less中定義的變數了。
// 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...