Vue框架之Vue腳手架

◆ Vue腳手架作用：

Vue腳手架可以快速生成Vue項目基礎的架構。

◆ Vue腳手架安裝：

npm install -g @vue/cli

腳手架安裝報錯：

npm ERR! code EPERM
npm ERR! syscall unlink
npm ERR! path C:\Users\ASUS\AppData\Roaming\npm\node_modules\.staging\yarn-2a3eea01\lib\cli.js
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, unlink 'C:\Users\ASUS\AppData\Roaming\npm\node_modules\.staging\yarn-2a3eea01\lib\cli.js'
......

修復方案：

使用npm install  -g npm , 安裝最新版本的npm, 防止因爲npm版本過低造成的上述問題

如果仍然報錯, 那麼可能是緩存造成的問題, 使用下面三條語句中的某一條

npm cache verify
npm cache clean
npm cache clean --force

◆使用命令創建Vue項目

vue create my-project

1. 選擇Manually select features(選擇特性以創建項目)
2. 勾選特性可以用空格進行勾選。
3. 是否選用歷史模式的路由：n
4. ESLint選擇：ESLint + Standard config
5. 何時進行ESLint語法校驗：Lint on save
6. babel，postcss等配置文件如何放置：In dedicated config files(單獨使用文件進行配置)
7. 是否保存爲模板：n
8. 使用哪個工具安裝包：npm

◆ 基於ui界面創建Vue項目

在自動打開的創建項目網頁中配置項目信息。

vue ui

◆ 基於2.x的舊模板創建Vue項目

npm install -g @vue/cli-init
vue init webpack my-project

◆ Vue腳手架生成的項目結構

node_modules:依賴包目錄
public：靜態資源目錄
src：源碼目錄
src/assets:資源目錄
src/components：組件目錄
src/views:視圖組件目錄
src/App.vue:根組件
src/main.js:入口js
src/router.js:路由js
babel.config.js:babel配置文件
.eslintrc.js:

◆ Vue腳手架的自定義配置：

通過單獨的配置文件進行配置，創建vue.config.js

module.exports = {
    devServer:{
        port:8888,
        open:true
    }
}

通過 package.json 進行配置 [不推薦使用]

 "vue":{
     "devServer":{
         "port":"9990",
         "open":true
     }
 }