安裝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 -vv12.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 環境建置
$ 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
$ 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年以上沒更新了，改用還有在更新的vanthttps://youzan.github.io/vant/#/zh-CN/quickstart 快速上手
https://github.com/youzan/vant youzan/vant
安裝Vant
$ npm i vant -S檢查已安裝插件的版本
$ npm list vanthello-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://协议下加载字体文件路径错误 #2366https://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 下載到本地 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')
}
即可
