㈠ 解決vue中修改export default中腳本報一大堆錯的問題
在寫vue代碼的時候遇到了一修改.vue文件中export
default下腳本的時候總是報一堆莫名其妙的錯誤的問題:
出錯原因：
在構建項目的時候Use
ESLint
to
lint
your
code?
(Y/n)選擇了y,規范了js代碼
解決途徑：
在webpack.base.conf.js裡面刪掉/注釋掉:
{
test:
/\.(js|vue)$/,
loader:
'eslint-loader',
enforce:
'pre',
include:
[resolve('src'),
resolve('test')],
options:
{
formatter:
require('eslint-friendly-formatter')
}
}
以上這篇解決vue中修改export
default中腳本報一大堆錯的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:解決vue.js
數據渲染成功仍報錯的問題關於vue的語法規則檢測報錯問題的解決
㈡ 顯示.vue文件里的內容的流程
如果是新手 你可以 安裝一下vue-cli
官網有教程
看看他那個目錄的結構 有個router文件夾 裡面有個index,js 基本上路由跳轉都在這里
components裡面寫的是組件
main.js是運行項目首先要訪問的文件
㈢ 請教vue.js的問題
/*!
* Vue.js v1.0.12
* (c) 2015 Evan You
* Released under the MIT License.
*/
(function (global, factory) {
typeof exports === 'object' && typeof mole !== 'undefined' ? mole.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
global.Vue = factory();
}
通過你的第二張截圖看到你也用的是一個在線 js 資源。
看一下這個 js 資源有沒有正常的載入下來。
我從中把前幾行引用出來。你可以看到，實例化的全局變數的名稱。你可以通過斷點調試確認執行情況。
我看到你的這段代碼的上面還有一些代碼。你需要排除一下是不是上面的代碼對 Vue 實例有一些影響。
㈣ Vue打包後出現的一些map文件怎麼去掉
修改 config/index.js 中：
proctionSourceMap: false
㈤ vue create項目缺少文件
vue create項目缺少文件原因如下:
首先檢查你前端的 package.json 文件，webstorm會提示部分依賴安裝有問題，或者會提示版本過高，基本就是顏色與其他的不一致。
解決方式很簡單，找到對應的版本，給他安裝就好了。若是找不到在dependencies，看看是具體缺少了什麼。
其次就是直接查看node_moles 模塊，看看是不是這裡面的東西報錯。如果是，直接找到對應的刪除就行，別傻乎乎的全刪了。刪除之後再重新下載即可。
㈥ Vue文件如何注釋多
在每個代碼塊內，注釋的時候，需要使用各自語言的注釋語法去注釋（HTML、CSS、javaScript、Jade 等）。在文件最頂部注釋的時候用HTML的注釋語法：<!— 在這里寫注釋的內容 --> 。
㈦ Vue打包時vendor的文件太大，有什麼辦法可以減少他的文件大小
在Vue 項目中,引入到工程中的所有 js、css 文件,編譯時都會被打包進 vendor.js,若是引入的庫眾多,那麼vendor.js文件體積將會相當的大,影響首開的體驗
㈧ 己保存的vue怎麼重新編緝
1 一般在vue中，有很多vue組件，這些組件每個都是一個文件。都可能需要引用到相同模塊(或者插件)。我們不想每個文件都import 一次模塊。
如果是基於vue.js編寫的插件我們可以用 Vue.use(...)
main.js
2 但是如果想添加一個全局命令，同時又讓每個vue的文件都能用到怎麼辦？
第一步：最好建立一個全局的命令文件例如：directive/directive.js
第二步：利用Vue.directive()建立一個全局命令，並將它暴露出來，例如一個focus 讓表單自動聚焦
directive.js
第三部步：在main.js（入口JS文件）中將它引入，可以省略文件後綴
main.js
這樣任何一個Vue文件只要這樣v-focus(命令名)，就可以很方便的用到了
3 Vue.directive() 的命令一般都是自動運行的或者說初始化等等觸發的，並不能用於非同步事件，怎麼辦？
於是我們可以用到'mixins'混合命令，你最好建立一個專門的文件夾用於存放混合命令，例如：
mixins.js
比如 saveScrollPosition （不是vue中的saveScrollPosition）可以每次在路由跳轉之間保存住瀏覽位置信息
注意：vue2.0 中 路由跳轉之間會自動保存位置信息 但是有Bug（位置信息之間會相互干擾）。
所以我們從新寫一個saveScrollPosition暴露出去後，在你需要的頁面中混入
這樣就會很方便。
4 如果你需要應用一個插件，同時他並不是基於vue.js的插件命令編寫的，那你可以將它賦予Vue的原型上
例如：我想全局引用axios，我們可以這樣
main.js
然後this.$http.get(url) 等等
xxx.vue
5 將需要的變數掛在到window對象上
例如：第三方庫Lodash.js,moment.js等等
main.js
xxx.vue
注意：這種方式不適合服務端渲染，服務端並沒有window對象
強調一點：以上所有的引入都必須通過入口JS文件去引入，這樣才能適用於全局
㈨ vue: WebStorm設置快速編譯運行的方法
WebSorm是一款優秀的前端開發工具，而Vue項目可以使用Node進行編譯運行，平常我們可以通過命令行部署項目進行調試。
本文介紹設置Webstorm進行快速部署Vue項目。
第一步
點擊啟動快捷按鈕旁邊的向下小箭頭，在列表中選擇Edit選項：
第二步
打開啟動設置頁面後，點擊左上角的加號添加新的運行方式：
第三步
在彈出的選擇框中，選擇node.js啟動模式：
第四步
在新打開的設置頁面中，在紅色圈中的地方設置如圖路徑的文件：
至此設置成功，直接點啟動按鈕就可以部署項目。
以上這篇vue:
WebStorm設置快速編譯運行的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:webstorm添加*.vue文件支持webstorm添加vue.js支持的方法教程webstorm中vue語法的支持詳解webstorm和.vue中es6語法報錯的解決方法詳解Webstorm
新建.vue文件支持高亮vue語法和es6語法
㈩ 如何優雅地使用 VSCode 來編輯 vue 文件
先來扒一扒使用 PHPStorm 遇到的問題：
vue文件雖然可以通過插件來解決高亮問題，但是 <script> 標簽中的 ES6 代碼的識別老是出問題，箭頭函數有的時候能正確識別，有的時候會報錯
無法正確識別 vue 文件中的 jsx 語法
無法正確識別和高亮 vue 文件 <style> 標簽中使用的 less 語法
vue文件中 <template> 部分使用了大量的自定義標簽（自定義組件）和自定義屬性，會報一堆 warning
經常性卡死
webpack實時編譯的錯誤不能直接展示在代碼編輯器內，還得自己到控制台中查看
如何安裝 vscode
很簡單，傳送門： 官網下載安裝
第一步，要支持 vue 文件的基本語法高亮
這里，我試過好3個插件： vue , VueHelper 和 vetur ，最終選擇使用 vetur 。
安裝插件： Ctrl + P 然後輸入 ext install vetur 然後回車點安裝即可。
p.s: vscode 的插件安裝比 PHPStorm 的插件安裝更快捷方便，安裝完成後還不用重啟整個程序，只要重新載入下工作區窗口就可以了。
安裝完 vetur 後還需要加上這樣一段配置下：
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}
這時可以打開一個vue文件試試，注意下右下角狀態欄是否正確識別為 vue 類型：
如果被識別為 text 或 html ，則記得要點擊切換下。
第二步，要支持 vue 文件的 ESLint
可能還有人會問為什麼要 ESLint ？沒有 lint 的代碼雖然也可能可以正確運行，但是 lint 作為編譯前的一道檢測成本更小，而且更快。此外， ESLint 還有很多規范是幫助我們寫出更加優雅而不容易出錯的代碼的。
jshint 本來也是個不錯的選擇，但是 ESLint 對 jsx 的支持讓我還是選擇了 ESLint.
安裝插件： Ctrl + P 然後輸入 ext install eslint 然後回車點安裝即可。
ESLint 不是安裝後就可以用的，還需要一些環境和配置：
首先，需要全局的 ESLint , 如果沒有安裝可以使用 npm install -g eslint 來安裝。
其次，vue文件是類 HTML 的文件，為了支持對 vue 文件的 ESLint ，需要 eslint-plugin-html 這個插件。可以使用 npm install -g eslint-plugin-html 來安裝
接著，安裝了 HTML 插件後，還需要在 vscode 中配置下 ESLint：
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
"eslint.options": {
"plugins": ["html"]
},
最後，別忘了在項目根目錄下創建 .eslintrc.json , 如果還沒創建，還可以使用下面快捷命令來創建：
這樣一來 vue 中寫的 js 代碼也能正確地被 lint 了。
要是不小心少個括弧之類的都可以有對應的報錯:
多餘 import 也都能報錯:
還是蠻智能的。
第三步，配置構建任務
vue 項目的構建我選擇用 webpack ，不過，並不是直接使用命令行下的 webpack 而是使用了 webpack 的 API 寫的 node 腳本。 腳本主要有兩個，一個是 build/bin/build.js 另一個是 build/bin/watch.js 分別是單次構建和實時構建。
於是乎，對應 vscode 中的 tasks 也是有兩個： build 和 watch ，簡單配置如下：
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
// use `Ctrl+P` and type `task` + SPACE + <taskName> to run a task
"version": "0.1.0",
"tasks": [
{
"taskName": "build",
"echoCommand": true,
"command": "node",
"args": [
"build/bin/build.js"
],
"suppressTaskName": true,
"isBuildCommand": true
},
{
"taskName": "watch",
"echoCommand": true,
"command": "node",
"args": [
"build/bin/watch.js"
],
"suppressTaskName": true,
"isBackground": true
}
]
}
這樣配置好後，按 Ctrl + Shift + B 即可開始單次構建。 不過單次構建比較慢（要10秒+），一般我都用實時構建： Ctrl + P 然後輸入 task watch <回車> 即可開始實時構建。實時構建除了第一次比較慢，其他時候還是非常快的，一般1秒內就可以構建好。
最後，webpack 構建錯誤提示
webpack 構建失敗後一般都會有錯誤提示，會顯示在輸出窗口中：
為啥是彩色的？ 因為裝了 Output Colorizer 這個插件。
當然，這樣還是不夠方便 -- 實時構建是後台運行的，「輸出」窗口一般也都是在後台，每次保存完文件還得點開豈不麻煩。
要是能做到像 ESLint 一樣直接把錯誤標到編輯器上面就好了。真的可以嗎？翻了下 vscode 的文檔，發現有神奇的 problemMatcher -- 可以對任務輸出進行解析，解析出的問題會顯示在「問題」窗口中，如果還有文件名行號和列號，則會在源代碼編輯窗口中對應的位置標出來。
先放個最終效果：
在這個文件的第32行，import 了一個不存在的模塊，這樣的錯誤在 ESLint 中當然是檢查不出來的，然而在 webpack 的實時構建中會報錯：
這個事情的困難在於兩點：
如何通過 problemMatcher 把這個錯誤給抓出來？
如何找到錯誤對應的行號？（如果可能的話，還有列號）
webpack的錯誤輸出格式並不是完全統一的，而且有些還沒有行號 -- 一方面可能是 webpack 的 bug ，另一方面 vue 文件在構建的時候會拆成 template, script 和 style 三個方面進行構建，報錯的行號可能對不上。
最終我的解決方案是對 webpack 的錯誤重新格式化輸出，然後匹配：
首先，重新格式化輸出需要 format-webpack-stats-errors-warnings 這個包（偶新寫的）
npm install --save-dev format-webpack-stats-errors-warnings
然後，到 build/bin/build.js 和 build/bin/watch.js 中在 webpack 構建完成的回調函數中增加這個格式化後的輸出：
更多使用介紹見 github
最後，在 .vscode/tasks.json 中，每個任務下添加 problemWatcher :
// ...
{
"taskName": "build",
// ...
// build 任務的:
"problemMatcher": {
"owner": "webpack",
"fileLocation": [
"relative",
"${workspaceRoot}"
],
"pattern": {
"regexp": "^!>(\\w+): (\\S+)?:(\\d+),(\\d+)(?:~(?:(\\d+),)?(\\d+))?: (.*)$",
"severity": 1,
"file": 2,
"line": 3,
"column": 4,
"endLine": 5,
"endColumn": 6,
"message": 7
}
}
}
{
"taskName": "watch",
// ...
// watch 任務的：
"problemMatcher": {
"owner": "webpack",
"fileLocation": [
"relative",
"${workspaceRoot}"
],
"pattern": {
"regexp": "^!>(\\w+): (\\S+)?:(\\d+),(\\d+)(?:~(?:(\\d+),)?(\\d+))?: (.*)$",
"severity": 1,
"file": 2,
"line": 3,
"column": 4,
"endLine": 5,
"endColumn": 6,
"message": 7
},
"watching": {
"activeOnStart": true,
"beginsPattern": "^\\s*Webpack begin run",
"endsPattern": "^\\s*Build complete at"
}
}
// ...
}
// ...
註：在 watch 任務中，為了匹配何時開始和何時結束，我在 webpack 構建的 run 和 watch 時增加了一個 console.log('Webpack begin run') 的列印，而在構建完成後增加了一個 console.log("Build complete at ..") 的列印。