目錄
- 請事先裝好 nodeJs
- 整個
vue-cli版本：vue 3.0.0+vue-router 4.0.0-0+vuex 4.0.0-0+eslint 6.7.2+typescript 4.1.5
安裝步驟
1. 安裝vue-cli
npm 或 yarn 安裝
npm install -g @vue/cliyarn global add @vue/cli
查看版本（是否安裝成功）：
vue -V(大寫的V)vue --version
當前我安裝的 vue-cli 版本為：4.5.13
2. 創建項目
進入demo目錄： cd G:\demo\
創建my-project項目：vue create my-project
- 提供了三種設置：Vue2版、Vue3版、手動選擇功能；
- 按鍵盤上下鍵選擇默認（default）還是手動（Manually）；
- 這里我選擇第三種：Manually select features；
- 回車鍵確認；
3. 選擇配置
選擇自己所要集成的配置（格鍵是選中與取消，A鍵是全選，回車確定）
這里我的選擇如下：
配置項：
- (*)
Choose Vue version：選擇 Vue 版本 - (*)
Babel：支持使用Babel編譯器 - (*)
TypeScript：支持使用 TypeScript 書寫源碼 - ( )
Progressive Web App (PWA) Support：支持PWA - (*)
Router：支持 vue-router - (*)
Vuex：支持 vuex - (*)
CSS Pre-processors：支持 CSS 預處理器 - (*)
Linter / Formatter：支持代碼風格檢查和格式化 - ( )
Unit Testing：支持單元測試 - ( )
E2E Testing： 支持 E2E 測試
4. 選擇 Vue 版本
這里我選擇：3.x
安裝的 vue-cli 將會是基於 vue3.x 版本
5. 是否使用 class 風格的組件語法
如果在項目中想要保持使用 TypeScript 的 class 風格的話，建議大家選擇y。
這里我選擇：y
6. 是否使用 Babel 與 TypeScript 一起用於自動檢測的填充
這里我選擇：y
7. 是否使用 history 路由模式
這里我選擇：y
8. 選擇CSS預處理器
Sass/SCSS分兩種：
- node-sass：是用 node(調用 cpp 編寫的 libsass)來編譯 sass，是自動編譯實時的
- dart-sass：是用 drat VM 來編譯 sass，需要保存后才會生效
這里我選擇：Sass/SCSS（with node-sass）
9. 選擇 eslint 配置
ESLint with error prevention only：只進行報錯提醒；ESLint + Airbnb config：Airbnb配置，不嚴謹模式；ESLint + Standard config：標准配置，正常模式；ESLint + Prettier：嚴格模式；TSlint：typescript格式驗證工具
這里我選擇：ESLint with error prevention only
10. 選擇什么時候執行 eslint 校驗
Lint on save：保存時檢查Lint and fix on commit：提交時檢查
這里我選擇：Lint on save
11. 選擇配置文件存放的位置
In dedicated config files：在專用的配置文件中單獨存放In package.json：存放在 package.json 中
這里我選擇：In dedicated config files
12. 是否保存之前的配置項
這里我選擇：N
13. 等待下載依賴模塊
14. 裝好后，進入目錄，啟動
cd my-project ( 進入項目根目錄 )
yarn serve ( 啟動項目 )
項目目錄
現在的目錄是 Vue3.x 的 cli 看上去簡潔多了，去掉了 Vue2.x 中 build 和 config 等目錄
項目配置
在項目的根目錄下新建 vue.config.js 文件（是根目錄，不是src目錄）
module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "./" : "/", // 部署生產環境和開發環境下的URL
outputDir: 'dist', // 構建輸出目錄(npm run build 或 yarn build 時 ，生成文件的目錄名稱)
assetsDir: 'assets', // 用於放置生成的靜態資源(js、css、img、fonts)的;（項目打包之后，靜態資源會放在這個文件夾下）
lintOnSave: true, // 是否開啟eslint保存檢測，有效值：ture | false | 'error'
runtimeCompiler: false, // 是否使用包含運行時編譯器的Vue核心的構建
transpileDependencies: [], // 默認情況下 babel-loader 忽略其中的所有文件 node_modules,這里可增加例外的依賴包名
productionSourceMap: false, // 是否在構建生產包時生成 sourceMap 文件，false將提高構建速度
filenameHashing: false, //默認情況下，生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存。你可以通過將這個選項設為 false 來關閉文件名哈希。(false的時候就是讓原來的文件名不改變)
css: { // 配置高於chainWebpack中關於 css loader 的配置
modules: false, // 是否開啟支持 foo.module.css 樣式
extract: true, // 是否使用 css 分離插件 ExtractTextPlugin，采用獨立樣式文件載入，不采用 <style> 方式內聯至 html 文件中
sourceMap: false, // 是否構建樣式地圖，false 將提高構建速度
loaderOptions: { // css預設器配置項
sass: {
data: '' //`@import "@/assets/scss/mixin.scss";`
},
css: {
// options here will be passed to css-loader
},
postcss: {
// options here will be passed to postcss-loader
}
}
},
configureWebpack: (config) => {
//webpack-bundle-analyzer 插件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
new BundleAnalyzerPlugin()
]
}
}
},
// 支持webPack-dev-server的所有選項
devServer: {
open: true, // 是否自動啟動瀏覽器
host: '0.0.0.0',
port: 3000, // 端口號
https: false,
hotOnly: false,
proxy: null,
// proxy: { // 配置多個代理
// '/api': {
// target: '<url>',
// ws: true,
// changOrigin: true
// },
// "/foo": {
// target: "<other_url>"
// }
// },
before: app => {}
},
parallel: require('os').cpus().length > 1, // 構建時開啟多進程處理 babel 編譯
pwa: { // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
},
pluginOptions: {} // 第三方插件配置
};
其他
其他方法使用 Vue3.x
- 獨立版本：可以在 Vue.js 的官網上直接下載最新版本, 並用
<script>標簽引入，下載 vue.js - 使用 CDN：
unpkg（推薦）：https://unpkg.com/vue@next ，會保持和 npm 發布的最新的版本一致。
Staticfile CDN（國內） : https://cdn.staticfile.org/vue/3.0.5/vue.global.js
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js - Vite (推薦)