菜鳥新手入門：vscode下vue腳手架開發入門流程

腳手架設置

腳手架安裝

vue init <template-name> <project-name>

可用模板：

1. webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
2. webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
3. browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
4. browserify-simple - A simple Browserify + vueify setup for quick prototyping.
5. pwa - PWA template for vue-cli based on the webpack template
6. simple - The simplest possible Vue setup in a single HTML file

流程：

? Project name // 項目名
? Project description // 項目描述
? Author // 開發者
? Vue build standalone
? Install vue-router? // 是否安裝Vue路由,單頁面應用建議開啓
? Use ESLint to lint your code? // 是否啓用eslint檢測規則，建議開啓
? Pick an ESLint preset Standard // 選擇eslint檢測規則的版本
? Setup unit tests with Karma + Mocha? No // 測試項目
? Setup e2e tests with Nightwatch? No // 測試項目

進入項目文件夾

cd 文件夾名

安裝依賴

安裝sass依賴

npm install node-sass --save-dev
npm install sass-loader --save-dev

或

npm i node-sass sass-loader -D

安裝axios依賴（與後臺數據交換）

npm install axios --save

或

npm i axios -S

更換webpack-dev-server版本

webpack-dev-server高於2.7.1的版本使用了es6，爲了兼容低版本的瀏覽器，使用2.7.1版本的webpack-dev-server

npm rm webpack-dev-server --save-dev
npm install webpack-dev-server@2.7.1 --save-dev

或

npm rm webpack-dev-server -D
npm i webpack-dev-server@2.7.1 -D

安裝默認依賴

npm install

或

npm i

自定義eslint檢測規則

在.eslintrc.js文件裏添加

// 沒有分號不警報
'semi': ['error', 'never'],
// 忽略函數的參數前必須有空格的警告
'space-before-function-paren': ['error', 'never'],
// 忽略縮進警報
'indent': 0,
// 儘量地使用單引號,容許字符串使用單引號或雙引號，只要字符串中包含了一個其它引號
'quotes': ['error', 'single', { 'avoidEscape': true }]

以上代碼根據我的代碼習慣進行設置。

設置視口

如下代碼適合移動版

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

添加報錯代碼

<script>
    window.onerror = function (message) {
        alert(message)
    }
</script>

以上代碼最好在編譯前刪除，防止正式版有彈窗報警。

vscode調試配置

需安裝vscode插件：Debugger for Chrome

在配置文件launch.json中添加

"configurations": [
    {
      "name": "啓動Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8080",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}",
      "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
      "name": "監聽Chrome",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "url": "http://localhost:8080",
      "webRoot": "${workspaceRoot}"
    }
]

項目目錄設置

1. 在src文件夾下添加common文件夾放公共的模塊和資源
2. 在common文件夾下添加fonts(字體)文件夾、js(javascript)文件夾、scss(scss樣式)文件夾
3. 在主目錄下的static文件夾下添加css文件夾，裏面放reset.css
4. 在.gitignore文件裏添加要忽略的文件和文件夾

導入

導入css重製設置

在main.js添加

// 導入css重製設置
import '../static/css/reset.css'

導入axios組件

在main.js添加

// 導入axios組件
import axios from 'axios'
// 全局註冊axios，不是vue插件
Vue.prototype.axios = axios
// 接口根地址
axios.defaults.baseURL = 'http://www.sample.com/'

編輯路由

設置基於vue-router的單頁應用的標題

// 導入模塊和組件
import Vue from 'vue'
import Router from 'vue-router'
import login from '@/components/login/login'
import index from '@/components/index/index'
// 註冊vue-router
Vue.use(Router)
// 單頁應用頁面的設置
const router = new Router({
  routes: [
    // 登陸
    {
      path: '/login',
      component: login,
      meta: {
        title: '登陸'
      }
    },
    // 首頁
    {
      path: '/index',
      component: index,
      meta: {
        title: '首頁'
      }
    }
  ]
})
// 對單頁應用的每一個頁面的title進行設置
router.afterEach(route => {
  // 從路由的元信息中獲取title屬性
  if (route.meta.title) {
    document.title = route.meta.title
    
    // 若是是iOS8如下的設備（使用UIWebView），則使用以下hack的寫法實現頁面標題的更新
    if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
      const hackIframe = document.createElement('iframe')
      hackIframe.style.display = 'none'
      hackIframe.src = '/robots.txt?r=' + Math.random()

      document.body.appendChild(hackIframe)

      setTimeout(_ => {
        document.body.removeChild(hackIframe)
      }, 300)
    }
  }
})
// 導出
export default router

開始編程

啓動項目

npm run dev

打開調試

打開vscode調試面板，點擊啓動Chrome。