安裝 cli3.x 版本
關(guān)于舊版本
Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli瞪慧。
如果你已經(jīng)全局安裝了舊版本的 vue-cli (1.x 或 2.x)帝美，你需要先通過以下命令卸載它汉形。
npm uninstall vue-cli -g
或
yarn global remove vue-cli
然后可以使用下列任一命令安裝這個新的包：
npm install -g @vue/cli
或
yarn global add @vue/cli
拉取 2.x 模板 (舊版本)
Vue CLI >= 3 和舊版使用了相同的 vue 命令白热，所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能熊响，你可以全局安裝一個橋接工具：
npm install -g @vue/cli-init
# `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同
vue init webpack my-project
創(chuàng)建項目
vue create hello-world
你會被提示選取一個 preset说敏。你可以選默認的包含了基本的 Babel + ESLint 設(shè)置的 preset，
如果選擇默認選項 default搪锣，將會構(gòu)建一個最基本的 vue 項目（沒有 vue-router 也沒有 vuex）
也可以選 Manually select features“手動選擇特性”來選取需要的特性.
下面是手動配置選項(空格鍵是選中和取消)
這樣就會創(chuàng)建一個包含 vue-router秋忙、vuex 和 postcss 的項目
勾選之后，使用回車鍵進入下一步
這里需要選擇路由模式构舟，yes 是 history 模式灰追，no 是 hash 模式，一般選用yes
后面還需要選擇 ESLint 的校驗規(guī)則，格式化的時機弹澎，和各個插件的配置項的位置朴下，不熟悉的話就選第一個
下面這個選擇了 In package.json
最后選擇是否將配置項保存為預(yù)設(shè)，然后配置完成苦蒿，開始生成項目.
進入項目 殴胧、啟動項目
npm run serve
以下是安裝vantui部分，非此ui框架可以結(jié)束了
安裝vant-ui
1.安裝
# 安裝 1.x 穩(wěn)定版本
npm i vant -S
2.采用方式一 自動按需引入組件 (推薦)
# 安裝插件
npm i babel-plugin-import -D
3.其后在babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
4.接著你可以在代碼中直接引入 Vant 組件
<template>
<div class="about">
<h1>This is an about page</h1>
<van-button type="default">默認按鈕</van-button>
<van-button type="primary">主要按鈕</van-button>
<van-button type="info">信息按鈕</van-button>
<van-button type="warning">警告按鈕</van-button>
<van-button type="danger">危險按鈕</van-button>
</div>
</template>
<script>
import {
Button
} from 'vant';
export default {
data() {
return {
}
},
components: {
[Button.name]: Button,
}
}
</script>
Rem 適配
Vant 中的樣式默認使用
px作為單位佩迟，如果需要使用rem單位团滥，推薦使用以下兩個工具
- postcss-pxtorem 是一款 postcss 插件，用于將單位轉(zhuǎn)化為 rem
- lib-flexible 用于設(shè)置 rem 基準值
1.下載lib-flexible
npm i lib-flexible --save
2.在main.js中引入lib-flexible
import 'lib-flexible/flexible'
3.安裝 postcss-pxtorem
npm install postcss-pxtorem -D
4.在根目錄下創(chuàng)建 vue.config.js配置postcss-pxtorem
module.exports = {
...
...
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 37.5, // 換算的基數(shù)
selectorBlackList: ['weui', 'mu'], // 忽略轉(zhuǎn)換正則匹配項
propList: ['*'],
}),
]
}
}
},
}
配置完成后音五，即可在開發(fā)中直接使用 px 單位開發(fā)
Vue-cli3.x-自定義基礎(chǔ)配置
在項目根目錄創(chuàng)建 vue.config.js
module.exports = {
publicPath:'/',//根路經(jīng) './'相對路徑
outputDir:'dist',//構(gòu)建輸出目錄
assetsDir:'assets',//靜態(tài)資源目錄（js,css,img,fonts）
lintOnSave: false,//是否開啟eslint保存監(jiān)測惫撰，有效值：true || false || 'error'
devServer:{
open:false, //項目運行起來自動打開瀏覽器
host:'0.0.0.0',//可選值 'localhost' || '127.0.0.1' || '0.0.0.0'( 本機ip)
port:8080,//端口號
https:false,// http://127.0.0.1:8081/ 與 https://127.0.0.1:8081/的區(qū)別
hotOnly:false, //熱更新
proxy:{
//配置跨域
'/api':{
target:'http://locallhost:5000/api/',
ws:true,
changOrigin:true,
pathRewrite:{ //地址重寫
'^/api':''
}
}
}
},
//...
}
Vue-cli3.x-全局變量
規(guī)則：
*文件中必須以VUE_APP_開頭
*通過process.env.XXX來使用
*通過.env配置環(huán)境變量
*通過.env[mode]區(qū)別開發(fā)和生產(chǎn)環(huán)境
區(qū)別：
.env.development =======>開發(fā)環(huán)境
.env.production =======>生產(chǎn)環(huán)境
.env=========> 在所有的環(huán)境中被載入
1.在項目根目錄創(chuàng)建 .env 和 .env.development 和 .env.production 文件
2.在其文件頁面中可自定義變量，如圖
VUE_APP_TITLE='我是全局title變量'
3.在.vue文件中讀取全局變量
data() {
return {
title:process.env.VUE_APP_TITLE
}
},
安裝HTTP 服務(wù)
主要用于訪問Vue打包后的頁面路徑躺涝，如訪問dist中的index.html頁面
1.安裝
npm install -g serve
2.查看serve版本
serve -v
3.啟用服務(wù)厨钻，同時指定目錄
serve -s dist/
