新手問與答

Q1：好像無法順利安裝成功捏？

先檢查看看是不是環境問題，Vue-cli 最佳環境為 Node.js v4.x, v6.x 以上及 npm v3 以上環境使用，可執行node -v及 npm -v查看版本。

Q2：開發完要如何讓網站上線？

執行npm run build，頁面會打包至 dist/ 資料夾下，將該頁面上傳就行囉！

Q3：<style scoped> 裡的 scoped 是什麼意思？

當<style>標籤加上 scoped 代表該 css 樣式只會在該組件下作用，就不用擔心組件之間的 CSS 互相干擾。

Q4：import 元件時，路徑前的 '@' 代表什麼？

'@' 是 /src 的別名，@/components/HelloWorld其實就等同於 src/components/HelloWorld。
可以打開 webpack.base.config.js ，在 module.exports 裡應該有下列這串定義'@': resolve('src'),.。

Q5：元件命名方式有規則嗎？

因為 HTML 不分大小寫，而 JavaScript 卻是嚴格區分，因此初學者可能一開始會搞不懂命名規則，根據官方 Style Guide 裡的說法，在 .vue 裡元件都須用 帕斯卡命名法 (PascalCase) 命名。

Q6：如何加上 favicon？

一樣在 index.html 的<head></head>內設定，我個人習慣是將圖片放在 static/ 下，因為放在 static/ 下的圖片不會被 webpack 編譯，比較不會有路徑的問題。

Q7：指令好多啊～哪幾個是基本必須會的？

vue -V：查看 vue-cli 版本，注意 V 要大寫
vue init <template-name> <project-name>：建立專案
cd <project-name>：移至專案目錄下
npm install：安裝 package.json 內定義的套件
npm run dev：開發前記得要先執行該命令
npm run build：開發完後要打包

vue 相關指令可呼叫vue -h查看
npm 相關指令可查看 package.json 裡的 "script"

Q8：ESLint 語法檢查真的很令人抓狂，可以關掉嗎？

至 build/webpack.base.conf.js 裡 module 下，將下列程式碼註解掉就行了，也可以在建立專案時就選擇不安裝 ESLint。

 const createLintingRule = () => ({
   test: /\.(js|vue)$/,
   loader: 'eslint-loader',
   enforce: 'pre',
   include: [resolve('src'), resolve('test')],
   options: {
     formatter: require('eslint-friendly-formatter'),
     emitWarning: !config.dev.showEslintErrorsInOverlay
   }
 })

...(config.dev.useEslint ? [createLintingRule()] : []

results matching ""

    No results matching ""