Vue心得

安裝nodejs和npm

https://tecadmin.net/install-latest-nodejs-and-npm-on-centos/  How To Install Latest Nodejs on CentOS/RHEL 7

新增Node.js Yum Repository - Stable 版本（12.x）

# yum install -y gcc-c++ make
# curl -sL https://rpm.nodesource.com/setup_12.x | sudo -E bash -

安裝Node.js

# yum install nodejs

檢查 Node.js 和 NPM 版本

# node -v
v12.16.2
# npm -v
6.14.4

npm命令自動完成

https://docs.npmjs.com/cli-commands/completion.html  Tab Completion for npm

$ npm completion >> ~/.bashrc

$ . ~/.bashrc

升級npm

https://stackoverflow.com/questions/50357008/when-should-you-use-npm-install-vs-npm-i  When should you use npm install vs npm i

npm i 就是npm install，只是簡寫
https://stackoverflow.com/questions/6237295/how-can-i-update-nodejs-and-npm-to-the-next-versions  How can I update NodeJS and NPM to the next versions?
# npm install -g npm

安裝/升級Vue Cli

https://cli.vuejs.org/zh/guide/installation.html
# npm install -g @vue/cli
...
-g : 同--global ，global模式安裝，將會安裝到 /usr/lib/node_modules/@vue/cli 下

檢查版本

# vue --version
@vue/cli 4.3.1

npm install的--save是什麼意思

https://stackoverflow.com/a/19578808  What is the --save option for npm install?
npm 5.0.0 後預設將modules裝在dependency，所以 --save 已經不再需要了。另外--save-dev將套件存在devDependencies、--save-optional將套件存在optionalDependencies

創建一個新項目

https://ithelp.ithome.com.tw/articles/10222966  Day28 vue.js - Vue cli 3.0 環境建置

https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create  创建一个项目

$ vue create hello-world

手動選取要 preset (預先裝置) 的特性

? Please pick a preset:

  default (babel, eslint)

❯ Manually select features

選取要安裝的特性 (用space多選)

預設選了Babel、Linter / Formatter

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)

 ◉ Babel

 ◯ TypeScript

 ◯ Progressive Web App (PWA) Support

 ◉ Router

 ◉ Vuex

 ◉ CSS Pre-processors

 ◉ Linter / Formatter

 ◯ Unit Testing

 ◯ E2E Testing

Babel : JavaScript 編譯器、轉譯器。

Router : Vue 的路由器

Vuex vuex（vue的狀態管理模式）

CSS Pre-processors : CSS 前處理器（如：less、sass）

Linter / Formatter : 程式碼風格檢查和格式化（如：ESlint）

是否使用 Router 歷史記錄模式

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

history 模式，這種模式充分利用 -history.pushState API 來完成 URL 跳轉而無須重新加載頁面。

css預先處理器

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)

❯ Sass/SCSS (with dart-sass)

  Sass/SCSS (with node-sass)

  Less

  Stylus

https://stackoverflow.com/a/56422541  Vue CLI CSS pre-processor option: dart-sass VS node-sass?  

簡單說選 dart-sass而不是node-sass 的原因：官方推薦、比較快

ESLint 協助讓你寫的程式符合規範的輔助工具，區分嚴謹程度

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
❯ ESLint + Standard config
  ESLint + Prettier

提示錯誤的時間點

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

配置文件怎麼放

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

是否將上述配置儲存到 preset 的 default

? Save this as a preset for future projects? (y/N) N

運行專案項目（開發用）

$ cd hello-world
$ npm run serve

運營專案指定端口

https://cli.vuejs.org/zh/config/#devserver
新增 vue.config.js
所有 webpack-dev-server 的选项 都支持。 vue.config.js 加入：

module.exports = {
  devServer: {
    port: 8100
  }
}

s
然後就能以  http://192.168.1.x:8100/ 訪問專案（當然server 8100端口防火牆要記得開）

關閉ESLint

https://stackoverflow.com/questions/49121110/how-to-disable-eslint-on-vue-cli-3  How to disable eslint on vue-cli 3?
vue.config.js 新增
module.exports = {
    chainWebpack: config => {
        config.module.rules.delete('eslint');
    }
}
這樣 npm run serve 時就不會做 eslint 檢查
WebStorm => Settings => Languages & Frameworks => Javascript => Code Quality Tools => ESLint => 勾選 Disable ESLint

用vue-native-websocket做長連結

https://juejin.im/post/5dd4ebdff265da47c8603e02   9012年末，带你快速上手vue-native-websocket

使用Mint-ui

https://zhuanlan.zhihu.com/p/61403630  2019最受欢迎的前端7个UI框架

https://juejin.im/post/5d674d87e51d4561fa2ec0a6  基于Vue CLI3 搭建五脏俱全的移动端H5应用

https://github.com/ElemeFE/mint-ui  ElemeFE/mint-ui

安裝

$ npm i mint-ui

使用

src/views/Test.vue:

import Vue from 'vue'
import Mint from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(Mint)
Mint.Toast('提示信息2')

s

或

import Vue from 'vue'
import Toast from 'mint-ui/lib/toast'
import 'mint-ui/lib/toast/style.css'

Vue.component(Toast.name, Toast)
Toast('提示信息4')

s

或安裝 babel-plugin-component ，可自動加載css
$ npm i babel-plugin-component -D
然後修改 babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    ["component", {
      "libraryName": "mint-ui",
      "style": true
    }]
  ]
}

需重新 npm run serve ，就可以這樣使用

import Vue from 'vue'
import { Cell, Checklist, Toast } from 'mint-ui'

Vue.component(Toast.name, Toast)
Toast('提示信息3')

s

打包項目到dist目錄

$ npm run build

如果在Windows上報錯

'vue-cli-service' 不是内部或外部命令，也不是可运行的程序

原因

node_modules/ 是在 CentOS上npm install的，專案在Windows卻不能 npm run serve、build

解法

https://github.com/vuejs/vue-cli/issues/1119#issuecomment-382105533  vue-cli-service does not run in cmd.exe or Powershell
在Windows 上刪除 node_modules/ 後重新 npm install

使用Vant

因為 mint-ui 已經2年以上沒更新了，改用還有在更新的vant
https://youzan.github.io/vant/#/zh-CN/quickstart  快速上手
https://github.com/youzan/vant  youzan/vant

安裝Vant

$ npm i vant -S

檢查已安裝插件的版本

$ npm list vant
hello-world@0.1.0 C:\Users\user\WebstormProjects\hello-world
`-- vant@2.6.3

使用

diff --git a/src/views/About.vue b/src/views/About.vue
 <template>
   <div class="about">
     <h1>This is an about page</h1>
+    <van-button type="primary">主要按钮2</van-button>
   </div>
 </template>
+<script>
+import Vue from 'vue'
+import Button from 'vant/lib/button'
+import 'vant/lib/button/style'
+Vue.component(Button.name, Button)
+export default {
+}
+</script>

Vue.component(Button.name, Button) - 沒引入會報錯 [Vue warn]: Unknown custom element: <van-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
https://github.com/youzan/vant/issues/359#issuecomment-347491408  全局注册的组件在单文件中不识别 #359
chenjiahan: Vue.use 是注册插件用的，注册组件请使用 Vue.component
export default {} - 沒寫會報錯 TypeError: Cannot set property 'render' of undefined
https://stackoverflow.com/a/51021896  Cannot set property 'render' of undefined

自動引入style

安裝babel-plugin-import 插件
$ npm i babel-plugin-import -D

babel 7 在 babel.config.js 配置
diff --git a/babel.config.js b/babel.config.js
   plugins: [
     ['component', {
       libraryName: 'mint-ui',
       style: true
     }],
+    ['import', {
+      libraryName: 'vant',
+      libraryDirectory: 'es',
+      style: true
+    }, 'vant']
   ]
 }
一定要用 babel-plugin-import，用 babel-plugin-component 會報錯
Module not found: Error: Can't resolve 'vant/lib/toast/style.css' in

import Vue from 'vue'
import { Button } from 'vant'
Vue.component(Button.name, Button)
export default {
}
就是少寫import css那一行

ps. https://www.npmjs.com/package/@vue/cli-plugin-babel  @vue/cli-plugin-babel
@vue/cli-plugin-babel 使用 Babel 7

修正Cordova中字體文件路徑錯誤

環境： vant@2.6.3 和 cordova@9.0.0

https://github.com/youzan/vant/issues/2366  file://协议下加载字体文件路径错误 #2366
https://stackoverflow.com/q/14575208  Using css font-face in a Phonegap Windows Phone 8 app

Tabbar 上的圖是用 vant-icon-db1de1.woff2 畫出來的，但在cordova中一樣因為 file:// 協議的關係，使得字型缺失

vant-icon-db1de1.woff2 是在 node_modules/vant/es/icon/index.css 的 @font-face 中請求 https://img.yzcdn.cn/vant/vant-icon-db1de1.woff2 來的

解法

將 vant-icon-db1de1.woff2 下載到本地  src/assets/vant-icon-db1de1.woff2 。 src/App.vue 加入（ 從node_modules/vant/es/icon/index.css 的 @font-face 粘過來修改）
@font-face {
  font-weight: 400;
  font-family: vant-icon;
  font-style: normal;
  font-display: auto;
  src: url("assets/vant-icon-db1de1.woff2") format('woff2')
}
即可