【重點】後來發現這些坑是由於 npm 不是最新的版本3.10.2， 用 npm 3.9.5就會出現以下坑

解決辦法: 請執行以下命令

npm update -g

報錯

Error: Cannot find module 'opn'

Error: Cannot find module 'webpack-dev-middleware'

Error: Cannot find module 'express'

Error: Cannot find module 'compression'

Error: Cannot find module 'sockjs'

Error: Cannot find module 'spdy'

Error: Cannot find module 'http-proxy-middleware'

Error: Cannot find module 'serve-index'

如果你用的是老版本的 vue-cli 還可能報其他錯誤，需要更新一下 vue-cli

npm update vue-cli

然後可以檢視一下當前全域性 vue-cli 的版本

npm view vue-cli

安裝一下這個依賴到工程開發環境

cnpm install opn --save-dev

cnpm install webpack-dev-middleware --save-dev

cnpm install express --save-dev

cnpm install compression --save-dev

cnpm install sockjs --save-dev

cnpm install spdy --save-dev

cnpm install http-proxy-middleware --save-dev

cnpm install serve-index --save-dev

cnpm install connect-history-api-fallback --save-dev

再啟動專案，報錯

ERROR in ./src/main.js

Module build failed: Error: Cannot find module 'babel-runtime/helpers/typeof'

at Function.Module._resolveFilename (module.js:440:15)
at Function.Module._load (module.js:388:25)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Volumes/MacStorage/Coding/Web/vue-test/node_modules/
 
[email protected]/lib/transformation/file/index.js:6:16)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)

@ multi main

ERROR in ./~/[email protected]
 
/client/socket.js

Module not found: Error: Can't resolve 'sockjs-client' in '/Volumes/MacStorage/Coding/Web/vue-test/node_modules/[email protected]/client'

@ ./~/[email protected]/client/socket.js 1:13-37

@ ./~/[email protected]/client? http://localhost:8080

@ multi main

安裝一下 babel-runtime

cnpm install babel-helpers --save-dev

啟動專案，再次報錯

Module build failed: Error: Cannot find module 'babel-helpers'

Module build failed: Error: Cannot find module 'babel-traverse'

Module build failed: Error: Cannot find module 'json5'

Module build failed: Error: Cannot find module 'babel-generator'

Module build failed: Error: Cannot find module 'detect-indent'

Module build failed: Error: Cannot find module 'jsesc'

找不到依賴那就再安裝一下

cnpm install babel-helpers --save-dev

cnpm install babel-traverse --save-dev

cnpm install json5 --save-dev

. ..不寫了，請把全部把舊的環境全部清除，更新到最新版本
解決辦法概述

遇到

Module build failed: Error: Cannot find module '模組名'

那就安裝

cnpm install 模組名 --save-dev(關於環境的，表現為npm run dev 啟動不了)

cnpm install 模組名 --save(關於專案的，比如main.js，表現為npm run dev 成功之後控制檯報錯)

比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list
終於可以啟動專案了

輸入完命令會自動啟動瀏覽器，如果預設開啟 IE 不行

npm run dev

自動啟動瀏覽器就會看到這 帥帥的介面了。
 

五、Vue部分知識講解

5.1 元件學習

<template>
  <div id="firstcomponent">
    <h1>I am a title.</h1>
    <a> written by {{ author }} </a>
  </div>
</template>

<script type="text/javascript">
export default {
  data () {
    return {
      author: "微信公眾號 jinkey-love"
    }
  }
}
</script>

<style>
</style>

然後在 App.vue 使用元件 ( 因為在 index.html 裡面定義了<div id="app"></div>所以就以這個元件作為主入口，方便 )

第一步，引入。在 <script></script> 標籤內的第一行寫

import firstcomponent from './component/firstcomponent.vue'

export default {
  data () {
    return {
      msg: 'Hello Vue!'
    }
  },
  components: { firstcomponent }
}

第三步，使用。

在 <template></template> 內加上<firstcomponent></firstcomponent>

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <firstcomponent></firstcomponent>
  </div>
</template>