vue-cli創建項目
上一篇我們安裝了vue-cli，接下來我們就使用該腳手架進行創建項目
1.進入一個目錄，創建項目
創建項目命令如下：
vue create <Project Name> //文件名 不支持駝峰（含大寫字母）
輸入完命令后，會讓你選擇一個preset
我們可以看到，默認有3個選項
- 默認的包含了基本的
Babel + ESLint設置的preset(Vue2版本) - 默認的包含了基本的
Babel + ESLint設置的preset(Vue3版本) Manually select features是自定義配置
我們選擇第3個自定義配置
2.選擇你需要的配置項
接着我們會跳轉到配置項中，我的自定義配置如下：
具體解釋如下：
◉ Choose Vue version // 選擇vue的版本
◉ 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
◯ E2E Testing
配置選好后，我們按下回車進行下一步
2.1 選擇vue版本
接着我們需要選擇vue版本，這里選用vue2.x版本
選擇完畢后，按下回車下一步
2.2 選擇選擇是否使用history router
接着會問我們是否使用history router，其實直白來說就是是否路徑帶 # 號，建議選擇 n，否則服務器還要進行配置
2.3 選擇css 預處理器
css 的預處理器我選擇的是 Sass/SCSS(with dart-sass) 。node-sass是自動編譯實時的，dart-sass需要保存后才會生效
2.4 選擇Eslint代碼驗證規則
接着選擇 ESLint 代碼校驗規則，提供一個插件化的javascript代碼檢測工具，ESLint + Prettier 使用較多
2.5 選擇什么時候進行代碼規則檢測
接着讓你選擇什么時候進行代碼規則檢測
( ) Lint on save // 保存就檢測
( ) Lint and fix on commit // fix和commit時候檢查
建議選擇保存就檢測，等到commit的時候，問題可能都已經積累很多了。
2.6 選擇如何存放配置
接着選擇某些配置文件是獨立存放到文件中，還是全部存放到package.json，我們這里建議第一個
> In dedicated config files // 獨立文件放置
In package.json // 放package.json里
2.7 是否保存當前配置
最后就是選擇是否保存剛才所選的配置，以便下次創建其他項目，就不需要再重新一個個去選擇了，我們這里選擇y，就會讓我們輸入保存配置信息的名字
那么我們保存后，配置到底是保存到了哪個文件夾？
回答：是放到了我們用戶目錄下的.vuerc文件下，我們切換到用戶目錄，使用命令cat .vuerc，配置信息如下：
{
"useTaobaoRegistry": true,
"latestVersion": "4.5.13",
"lastChecked": 1626320210348,
"presets": {
"testVueCli": {
"useConfigFiles": true,
"plugins": {
"@vue/cli-plugin-babel": {},
"@vue/cli-plugin-router": {
"historyMode": false
},
"@vue/cli-plugin-vuex": {},
"@vue/cli-plugin-eslint": {
"config": "prettier",
"lintOn": [
"save"
]
}
},
"vueVersion": "2",
"cssPreprocessor": "dart-sass"
}
}
}%
這里就是我們剛才設置的配置信息，如果我們想把配置刪除，只需要把presets中的信息刪除即可
3.項目的配置圖
這里展示我們剛才所填的所有選項的圖片
4.項目創建完成
最后出現以下紅框內的successfully就代表我們通過vue-cli腳手架，創建項目成功了
5.輸入npm run serve啟動項目
項目創建完成后，項目目錄如下：
我們直接進入package.json中，我們直接點擊serve左邊的啟動按鈕，點擊run serve，webstorm會自動幫我們啟動項目
啟動完成后，控制台會出現如下畫面
我們點擊http://localhost:8080/，我們就會在網頁上看到首頁了
6.項目結構解析
我們創建完項目后，必須知道項目的整體結構、項目的每個文件夾和文件是做什么的，接下里詳細介紹下
項目結構配置：
node_modules
里面存放了項目需要的各種環境依賴包
public
public里面存放一個網站標簽favicon.ico和index首頁，以后打包時，會把這些文件原封不動的打包到dist文件夾下
src
我們前端寫的源代碼都會在這個文件夾下
.browserslistrc
這個文件是對瀏覽器的一些配置，文件里的內容如下
> 1%
last 2 versions
not dead
一般不需要做修改
.eslintrc.js
代碼風格檢測，如果我們在其中配置了一些代碼規則，我們寫代碼時出現不符合規則的代碼，編譯時就會報錯
.gitignore
這個文件是使用git上傳時，對某些文件忽略，內容如下：
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
如果你把整個項目上傳到git服務器，那么以上后綴的文件都不會進行上傳
bable.config.js
對bable進行配置的文件，一般不做修改
package.json
整個項目對包的配置，都在這里面，還包括了啟動項目命令等等