1. 什么是: 一套已經(jīng)包含核心功能和標(biāo)準(zhǔn)文件夾結(jié)構(gòu)的半成品項(xiàng)目。
2. 為什么: 標(biāo)準(zhǔn)化！極其便于協(xié)作，降低學(xué)習(xí)成本。
3. 何時(shí): 今后所有項(xiàng)目，所有新技術(shù)，都是在腳手架基礎(chǔ)上開(kāi)發(fā)的.
4. 如何: 2大步:?
? (1). 安裝可以反復(fù)生成腳手架的工具: （老母雞）
? ?a. 設(shè)置淘寶鏡像——下載快
?? ?npm config set registry https://registry.npm.taobao.org
?? ?b. 安裝可生成腳手架代碼的命令行工具
?? ?npm ?i ?-g ?@vue/cli
?? ?當(dāng)看到: + @vue/cli@版本號(hào) 說(shuō)明安裝成功
? (2). 用工具反復(fù)為每個(gè)項(xiàng)目創(chuàng)建專(zhuān)門(mén)的腳手架結(jié)構(gòu):?
? a. 決定把項(xiàng)目文件夾保存在哪個(gè)位置
? b. 再在整個(gè)文件夾位置，運(yùn)行: vue create 自定義項(xiàng)目名
? ? 1). ? Please pick a preset:
? ?? ? Default ([Vue 2] babel, eslint)
? ?? ? Default (Vue 3) ([Vue 3] babel, eslint)
?? ?> Manually select features
? ? 2). ? Check the features needed for your project:
??? ? ( ) Choose Vue version //按空格切換選中/不選中
??? ? (*) Babel ?//ES6翻譯為ES5
??? ? ( ) TypeScript ?//下周一學(xué)VUE3再選
??? ? ( ) Progressive Web App (PWA) Support
??? ? (*) Router //VueRouter，SPA應(yīng)用的核心
??? ? (*) Vuex //下周一講
??? ? (*) CSS Pre-processors //支持Scss
??? ? ( ) Linter / Formatter //不要選，代碼質(zhì)量檢查工具，要求過(guò)于嚴(yán)格
??? ? ( ) Unit Testing
?? ?>( ) E2E Testing
? ? 3). ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) N
? ? 其實(shí)vue的路由有兩種模式:?
? ? i. hash(#)模式: http://域名:端口號(hào)/#/相對(duì)路徑
? ? ii. history模式: http://域名:端口號(hào)/相對(duì)路徑
? ? ? ?需要專(zhuān)業(yè)的服務(wù)器端工程師配合——必須配置服務(wù)器端的首頁(yè)重定向機(jī)制。
? ? 4). ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
? > Sass/SCSS (with dart-sass)
? ? Sass/SCSS (with node-sass)
? ? Less
? ? Stylus
? ? 5). ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
? ? ? In dedicated config files
? ? > In package.json
? ? 6). ? Save this as a preset for future projects? (y/N) N
? ? 7). 等待。。。
? ? 看到: Successfully created project xzvue. 說(shuō)明安裝成功
5. 使用vscode打開(kāi)并運(yùn)行腳手架項(xiàng)目:?
? (1). 右鍵單擊package.json文件，選擇"在集成終端中打開(kāi)"
? (2). 在終端窗口中輸入: npm run serve
? ? ? 看到: App running at:
? ? ? ? ? ?- Local: ? http://localhost:8080/
? (3). 按住Ctrl，點(diǎn)local:右側(cè)的連接，自動(dòng)打開(kāi)瀏覽器
? ? 問(wèn)題: 如果無(wú)法自動(dòng)打開(kāi)，可重裝chrome瀏覽器并配置操作系統(tǒng)的默認(rèn)瀏覽器為chrome。

總結(jié)

以上是生活随笔為你收集整理的VUE_2脚手架的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。