一螟加、創(chuàng)建并初始化VUE項(xiàng)目
1.安裝完VUE和nodejs后在指定文件夾根目錄生成項(xiàng)目文件夾
在命令行內(nèi)進(jìn)入當(dāng)前文件夾
輸入
vue init webpack "你項(xiàng)目的名稱（英文）"
其他選項(xiàng)默認(rèn)
image.png
生成的文件夾
QQ截圖20181030144532.png
2.安裝配置
image.png
3.安裝完畢運(yùn)行
yarn start
未安裝yarn的可直接運(yùn)行
npm run dev
image.png
4.命令行內(nèi)的端口號localhost:8081
image.png
至此VUE項(xiàng)目初始化完成徘溢。
二吞琐、開始在編輯器中創(chuàng)建正式項(xiàng)目
1、在src下創(chuàng)建以下文件
image.png
2.配置rem.js
/* 配置rem */
function remFn() {
document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'
}
remFn()
/* //當(dāng)頁面發(fā)生變化重新配置rem */
window.onresize = remFn
3.刪除初始化多余項(xiàng)目
3.1刪除components文件夾下的helloworld文件
3.2在app.vue中刪除以下內(nèi)容(如果報(bào)錯請檢查是否存在空格未刪除)
image.png
4.讓項(xiàng)目先跑起來
npm run dev
image.png
image.png
5.***引入sass
5.1由于vue-cli腳手架沒有支持sass所以需要手動安裝
cnpm i node-sass sass-loader -D
*注在開發(fā)測試環(huán)境使用-D/--seve-dev然爆；生產(chǎn)環(huán)境使用-S/--seve
image.png
5.2在單文件組件中使用sass方法
<style lang="scss">
...
</style>
