- 安裝node

官網下載安裝包，傻瓜式安裝：https://nodejs.org/zh-cn/

- 安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

- 安裝腳手架

cnpm install -g @vue/cli


- 清空快取處理

npm cache clean --force
 

vue create 專案名
// 要提前進入目標目錄(專案應該建立在哪個目錄下)
// 選擇自定義方式建立專案，選取Router, Vuex外掛
//標準eslint，自動修復（ESlint+Standard config--》lint on save+Lint and fix on commit）
vue ui 使用圖形介面建立專案

npm run serve / ctrl+c
// 要提前進入專案根目錄

npm run build
// 要在專案根目錄下進行打包操作

"scripts": {
    "serve": "vue-cli-service serve",  # 執行專案
"build": "vue-cli-service build",  # 編譯專案成html，css，js
"lint": "vue-cli-service lint"# 程式碼格式化
},

dist: 打包的專案目錄(打包後會生成)
node_modules: 專案依賴(刪掉，不上傳git，使用npm install重新安裝)
public: 共用資源
	--favicon.ico
 

	--index.html:專案入口頁面，單頁面
src: 專案目標,書寫程式碼的地方
	-- assets:資源
	-- components:元件
	-- views:檢視元件
	-- App.vue:根元件
	-- main.js: 入口js
	-- router.js: 路由檔案
	-- store.js: 狀態庫檔案
vue.config.js: 專案配置檔案(沒有可以自己新建)
package.json：專案配置依賴（等同於python專案的reqirement.txt）

//https://cli.vuejs.org/zh/config/ 配置參考
module.exports={
	devServer: {
		port: 8888
	}
}
// 修改埠,選做

//es6 模組匯入規範，等同於python導包
//commonJs的匯入規範：var Vue=require('vue')
import Vue from 'vue'
import App from './App.vue'  //根元件
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')


/*
new Vue({
	el:'#app' //原來是用el:'#app'，現在是new出Vue物件，掛載到#app上---》.$mount('#app')
  render: h => h(App) //原來是在頁面上div中寫樣式，現在元件化開發 把根元件（import App from './App.vue'），通過render渲染上，渲染元件的方式
}).$mount('#app')
*/

<template>
    <!-- 模板區域 -->
</template>
<script>
    // 邏輯程式碼區域
    // 該語法和script綁定出現
  	//export default-->es6的預設匯出（匯出一個物件），模擬commonJS的匯出方式制定的
    export default {

    }
</script>
<style scoped>
/* 樣式區域 */
/* scoped表示這裡的樣式只適用於元件內部, scoped與style綁定出現 */
</style>

#1 新建xx.vue
components-->HelloWorld.vue
#2 引入使用
<script>
# es6的引入import from 
import HelloWorld from'@/components/HelloWorld.vue'
import Vue from'vue'
  Vue.component('HelloWorld',HelloWorld) # 全域性元件
  export default {
     components: { # 區域性元件
   		 HelloWorld:HelloWorld
  		},

}
</script>

ESLint 是一個開源的 JavaScript 程式碼檢查工具，由 Nicholas C. Zakas 於2013年6月建立。程式碼檢查是一種靜態的分析，常用於尋找有問題的模式或者程式碼，並且不依賴於具體的編碼風格。對大多數程式語言來說都會有程式碼檢查，一般來說編譯程式會內建檢查工具。

JavaScript 是一個動態的弱型別語言，在開發中比較容易出錯。因為沒有編譯程式，為了尋找 JavaScript 程式碼錯誤通常需要在執行過程中不斷除錯。像 ESLint 這樣的可以讓程式設計師在編碼的過程中發現問題而不是在執行的過程中。

ESLint 的初衷是為了讓程式設計師可以建立自己的檢測規則。ESLint 的所有規則都被設計成可插入的。ESLint 的預設規則與其他的外掛並沒有什麼區別，規則本身和測試可以依賴於同樣的模式。為了便於人們使用，ESLint 內建了一些規則，當然，你可以在使用過程中自定義規則。

ESLint 使用 Node.js 編寫，這樣既可以有一個快速的執行環境的同時也便於安裝
js語法規範性檢查，類似於PEP8規範
官網
https://eslint.bootcss.com/docs/about/

"babel-eslint": "^7.1.1",  
"eslint-config-standard": "^6.2.1",  
"eslint-friendly-formatter": "^2.0.7",  
"eslint-loader": "^1.6.1",  
"eslint-plugin-html": "^2.0.0",  
"eslint-plugin-promise": "^3.4.0",  
"eslint-plugin-standard": "^2.0.1",

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "rules": {
      "eol-last": [0],
      "semi": [2, "always"], // 強制語句分號結尾
      "indent": [2, 4], // 強制縮排4 spaces
      "no-new": [0], // 不允許new一個例項後不賦值或不比較
      "no-debugger": [0], // 不允許出現debugger語句
      "camelcase": [0, {"properties": "never"}] // 關閉駝峰命名規則
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
 },
 "eslintIgnore": [
    "dist/*",
    "node_modules/*",
    "build/*",
    "*.md"
 ],