Vue2.0 從環境搭建到釋出(新手完全填坑攻略)
【重點】後來發現這些坑是由於 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 元件學習
在工程目錄 /src 下建立 component 資料夾,並在 component 資料夾下建立一個 firstcomponent.vue 並寫仿照 App.vue 的格式和前面學到的知識寫一個元件。<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'
第二步,註冊。在 <script></script> 標籤內的 data 程式碼塊後面加上 components: { firstcomponent }。
記得中間加英文逗號!!!
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>
這時候看看瀏覽器上的 http://localhost:8080/ 頁面(之前開啟過就會自動重新整理),如果你沒看到效果是因為你沒有對 App.vue 和 firstcomponent.vue 進行儲存操作,儲存後頁面會自動重新整理。
相關推薦
Vue2.0 從環境搭建到釋出(新手完全填坑攻略)
【重點】後來發現這些坑是由於 npm 不是最新的版本3.10.2, 用 npm 3.9.5就會出現以下坑 解決辦法: 請執行以下命令 npm update -g 報錯 Error: Cannot find module 'opn' Error: Cannot find module 'webpack
VUE2.0——Vue腳手架搭建專案(vue-cli)
原文地址:https://www.jianshu.com/p/1626b8643676 使用的編輯器是VScode,新建立一個資料夾,在新建終端裡面敲命令。 1.安裝node.js 安裝完成之後,開啟命令列工具(win+r,然後輸入cmd),輸入 node -v,如果出現相應的版
flutter 問題集錦(各種挖坑填坑的過程)
1.新增依賴出現錯誤(eg:english_words) 按照官網的方法新增完依賴是沒有問題的, 把 import 'package:english_words/english_words.dart
51個賺錢最好的方法(史上最全攻略)
有很多方法賺錢。你可以在家工作,你可以做各種自由職業者,你可以在部落格,也可以只儲存。時間緊迫,我
Vue2.0 新手入門 — 從環境搭建到釋出
什麼是 Vue Vue 是一個前端框架,特點是 資料繫結 比如你改變一個輸入框 Input 標籤的值,會自動同步更新到頁面上其他繫結該輸入框的元件的值  元件化 頁面上小到一個按鈕都可以是一個單獨的檔案.vue,這些小元件直接可以像樂高
vue2.0 配置環境總結(都是淚啊)
fan all oba 都是 cnpm 2.0 git lex tex 最近有點空閑時間,終於把一直想學的vue提上了日程,以下是收集的一些幫助入門的鏈接 1:https://vuefe.cn/v2/guide/ vue2.0中文官網 2:https://ro
深度學習(TensorFlow)環境搭建:(三)Ubuntu16.04+CUDA8.0+cuDNN7+Anaconda4.4+Python3.6+TensorFlow1.3
缺失 應該 否則 wid -c 方式 *** 也不能 collected 緊接著上一篇的文章《深度學習(TensorFlow)環境搭建:(二)Ubuntu16.04+1080Ti顯卡驅動》,這篇文章,主要講解如何安裝CUDA+CUDNN,不過前提是我們是已經把NVID
區塊鏈之Hyperledger(超級賬本)Fabric v1.0 的環境搭建(更新)
mirror linu stat iyu wget glob 保存 url oba 參考鏈接:https://blog.csdn.net/so5418418/article/details/78355868 https://blog.csdn.net/wgh101539
VUE 新手環境搭建-釋出
什麼是 Vue Vue 是一個前端框架,特點是 資料繫結 比如你改變一個輸入框 Input 標籤的值,會自動同步更新到頁面上其他繫結該輸入框的元件的值  資料繫結 元件化 頁面上小到一個按鈕都可以是一個單獨的檔案.vue,這些小元
MYSQL雙機主從環境搭建(流程簡單)
MYSQL資料庫沒有增量備份的機制,當資料量太大的時候備份是一個很大的問題。還好mysql資料庫提供了一種主從備份的機制,其實就是把主資料庫的所有的資料同時寫到備份資料庫中,實現mysql資料庫的熱備份。要想實現雙機的熱備首先要了解主從資料庫伺服器的版本的需求。要實現熱備mysql的版本都要高於3.2
區塊鏈之Hyperledger(超級賬本)Fabric v1.0 的環境搭建(超詳細教程)
首先感謝深藍居,這篇教程是基於他的教程[http://www.cnblogs.com/studyzy/p/7437157.html]整理的,區塊鏈技術發展很快,在大神的教程上稍做了些補充。另外,有也在學習區塊鏈的同學可以聯絡我,大家互相學習! 在剛開始接觸Hy
Vue.js2.0開發環境搭建(一)
最近,vue.js越來越火。在這樣的大浪潮下,我也開始進入vue的學習行列中,在網上也搜了很多教程,按著教程來做,也總會出現這樣那樣的問題(坑啊,由於網上那些教程都是Vue.js 1.x版本的,現在用Vue.js 的構建工具都已經升級到2.0版本了),經過了一段時間的摸索和看
Hadoop-2.8.0 開發環境搭建(Mac)
Hadoop是一個由Apache基金會開發的分散式系統架構,簡稱HDFS,具有高容錯性、可伸縮性等特點,並且可以部署在低配置的硬體上;同時,提供了高吞吐量的資料訪問效能,適用於超大資料集的應用程式,以及通過叢集拓撲高效快速的處理資料的能力。 本文主要介紹一下Hadoop的開
mysql 兩主一從環境搭建(5.7.24)
## 搭建說明 * 兩主一從,從本質上說,只不過是機器 master-a 和 master-b 互為主從機(熱備),然後通過 **keepalived** 進行高可用配置,使得在同一時間內只會有一臺對外提供服務,實現單寫機制,另一個機器 slave 則作為 master-a 的從機存在(冷備)。 *
openstack controller ha測試環境搭建記錄(十四)——配置cinder(存儲節點)
nbsp 設置 ntp reason script snap rate 文件 esc 先簡述cinder存儲節點的配置: 1、IP地址是10.0.0.41; 2、主機名被設置為block1; 3、所有節點的hosts文件已添加相應條目; 4、已經配置了ntp時間同
openstack controller ha測試環境搭建記錄(十一)——配置neutron(網絡節點)
efault delete none _for set ext ranges tar edr 在網絡節點配置內核參數:vi /etc/sysctl.confnet.ipv4.ip_forward=1net.ipv4.conf.all.rp_filter=0net.ipv4.
Qt 5.5.0 Windows環境搭建
article 版本號 一個 source window 環境變量 bsp pro 不能 1)訪問官方站點:http://www.qt.io/download-open-source/ 2)選擇離線安裝包 3)選擇 W
Django重新開始學習--環境搭建 筆記(一)
nbsp url對應 tin art admin set pla base default 環境 : python2.7 django 1.9.8 使用工具pycharm Mysql =====================================
Web自動化測試環境搭建1(基於firefox火狐瀏覽器)
ktr gecko 激情 後臺 自動更新 fire 這一 把手 HA 自動化測試是時代趨勢,因此很多測試人員開始研究自動化測試,web自動化測試化測試並不難,但是很多人都是被擋在了環境搭建這一步,後面學習激情全無,這裏,韜哥手把手教大家搭建火狐瀏覽器下的自動化測試環境(
LNMP環境搭建記錄(源碼方式)
des all 英文 pass ml2 內核 evel 語言 highlight LNMP指的是在Linux下用PHP+MYSQL+NGIX搭建網站的環境。 Nginx是一個高性能的 HTTP 和 反向代理 服務器,也是一個 IMAP/POP3/SMTP 代