使用vue-cli創建項目
- 全局安裝vue-cli
cnpm install -g @vue/cli
- 使用vue-cli創建項目
vue create vuedemo
具體操作如下：
首先，會提示你選擇一個preset（預設）：
1、除最后兩個，其他選項都是你此前保存的預設配置（如下圖第一個“ my-default”是我之前保存的預設配置，如今便可以直接用了）：
如果沒有配置保存過，則只有以下兩個選項：
2、default（babel，eslint）：默認設置（直接enter）非常適合快速創建一個新項目的原型，沒有帶任何輔助功能的 npm包
3、 Manually select features：自定義配置（按方向鍵 ↓）是我們所需要的面向生產的項目，提供可選功能的 npm 包
手動選擇需要添加的配置項：(注意：上下件是移動，選中是按空格鍵 )
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
(*) Babel //轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。
( ) TypeScript// TypeScript是一個JavaScript（后綴.js）的超集（后綴.ts）包含並擴展了 JavaScript 的語法，需要被編譯輸出為 JavaScript在瀏覽器運行，目前較少人再用
( ) Progressive Web App (PWA) Support// 漸進式Web應用程序
(*) Router // vue-router（vue路由）
(*) Vuex // vuex（vue的狀態管理模式）
(*) CSS Pre-processors // CSS 預處理器（如：less、sass）
(*) Linter / Formatter // 代碼風格檢查和格式化（如：ESlint）
( ) Unit Testing // 單元測試（unit tests）
( ) E2E Testing // e2e（end to end） 測試
選擇完后直接enter，然后會提示你選擇對應功能的具體工具包，選擇自己擅長或者使用廣泛的（方便遇到問題時百度），簡介如下：
1、是否使用history router：
Vue-Router 利用了瀏覽器自身的hash 模式和 history 模式的特性來實現前端路由（通過調用瀏覽器提供的接口）
2、css預處理器
主要為css解決瀏覽器兼容、簡化CSS代碼 等問題
3、ESLint：
提供一個插件化的javascript代碼檢測工具，ESLint + Prettier //使用較多
4、何時檢測：
5、單元測試 ：
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai //mocha靈活,只提供簡單的測試結構，如果需要其他功能需要添加其他庫/插件完成。必須在全局環境中安裝
Jest //安裝配置簡單，容易上手。內置Istanbul，可以查看到測試覆蓋率，相較於Mocha:配置簡潔、測試代碼簡潔、易於和babel集成、內置豐富的expect
6、如何存放配置 ：
7、是否保存本次配置（y:記錄本次配置，然后需要你起個名; n：不記錄本次配置）：
8、搭建完成、運行
cd vuedemo
npm run dev
使用vite創建vue項目
- 全局安裝安裝Vite
npm install -g create-vite-app
- 使用vite創建vue3項目
create-vite-app vuedemo
- 安裝依賴運行項目
// 進入vuedemo文件夾
cd vuedemo
// 安裝依賴
npm install
// 運行
npm run dev
備注：vue3.0兼容vue2.x
參考：https://www.cnblogs.com/coober/p/10875647.html
手動引入sass：
安裝 sass-loader node-sass
npm install sass-loader node-sass -D 或 npm install sass-loader node-sass --save
寫入sass的語法，可能會報TypeError: this.getOptions is not a function相關的錯誤
原因：這個實際上就是 sass-loader 的版本過高，不兼容 getOptions 函數方法，所以需要對 sass-loader 進行降級處理
解決方法：通過 npm uninstall sass-loader node-sass 命令卸載原版本的 sass-loader，然后 通過 npm install sass-loader@10.1.1 node-sass@5.0.0 --save-dev 命令下載降級版本的 sass-loader、node-sass，這個問題就可以解決了
node
使用：
<style lang="scss">
</style>
- 另外，如果vue需要升級：
先通過 npm uninstall vue-cli -g卸載vue，然后再安裝，但是如果vue -V時依然是2.9.6版本：
第一步：npm config get registry
第二步：npm config set registry https://registry.npm.taobao.org
第三步：npm i -g @vue/cli
如果還不行 就根據提示執行 強制覆蓋
//如果需要清空緩存
npm clean cache --force
sudo npm install @vue/cli -g --force
或者
sudo npm i -g @vue/cli --force