2. 程式人生 > >Vue 學習隨筆三 - webstorm簡單配置

Vue 學習隨筆三 - webstorm簡單配置

阿新 • • 發佈：2018-10-20
內容 問題 分代 javascrip 開發人員 規則 ret ctrl+ 添加

工欲善其事，必先利其器。

現在我們說一下，剛開始新建project的時候，選擇的ESLint，這是一個代碼規範規則，用來統一不同開發人員，不同開發工具產生的不一樣的代碼風格，導致公共代碼的可讀性不高的問題。

需要配置一下webstorm的默認設置，CTRL+ALT+S打開設置框，Editor->Code Style -> JavaScript，右上角的 set from 選擇 JavaScript Standard Style。

然後，在 Languages & Frameworks -> JavaScript 中設置 版本為 ECMAScrpit 6。

同時，我們在項目中添加 prettier 工具，這是一個代碼格式化的工具，可以格式化大多數ESLint中規定的代碼規範。

在webstorm中安裝 prettier 插件，prettier默認的快捷鍵 是 CTRL+ALT+SHIFT+P 按鈕，在項目的根目錄中添加 .prettierrc 文件，可在上篇文末的github中獲取。

內容如下:

{
  "semi": false,
  "singleQuote": true
}
semi false 表示格式化後代碼尾部不添加分號，singleQuote true 表示自動格式化所有的雙引號為單引號。

ESLint規定，HTML標簽的屬性，除非只有一個之外，都必須新起一行，雖然看上去代碼有點醜，但是我還是習慣了，如下圖：

技術分享圖片

JS部分代碼為：

技術分享圖片

網上很多webstorm ESLint Prettier 的介紹，其實沒那麽多東西，簡單配置一下就好了。

Vue 學習隨筆三 - webstorm簡單配置
   
 
 
 
 

            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
Vue 學習隨筆三 - webstorm簡單配置

     
 內容   問題   分代   javascrip   開發人員   規則   ret   ctrl+   添加   工欲善其事，必先利其器。
現在我們說一下，剛開始新建project的時候，選擇的ESLint，這是一個代碼規範規則，用來統一不同開發人員，不同開發工具產生的不一樣的代碼風格，導致公共代碼的可讀性 



  
 

    


    
    
Vue 學習隨筆五 - 簡單項目設計

     
 pan   badge   mil   closed   css   ret   false   justify   nbsp   學一門技術的最好方法是用這個技術去做一件事情，現在規劃一下我們這個DEMO的簡單需求。
概述：做一個後臺系統，實現簡單的實體CRUD，以及跟前臺的交互功能。
UI：集成Boots 



  
 

    


    
    
Vue 學習隨筆五 - 簡單專案設計

     
 學一門技術的最好方法是用這個技術去做一件事情，現在規劃一下我們這個DEMO的簡單需求。 
概述：做一個後臺系統，實現簡單的實體CRUD，以及跟前臺的互動功能。 
UI：整合Bootstrap樣式，實現簡單後臺的框架 
後臺：Springboot，使用Kotlin開發 
需求：User的CRUD，User包括子 



  
 

    


    
    
Vue 學習隨筆二 - 簡單說明

     
 接上篇，點選連結會出現如下頁面，我這個demo因為做了一些了，臨時改回初始狀態，一些樣式已經不一樣了，見諒： 
 
程式碼如下： 
<template>  <div>{{ msg }}</div></template><script>export d 



  
 

    


    
    
vue學習筆記(三)：vue-cli腳手架搭建

     
 node   log   ins   版本   返回   ges   技術分享   安裝webpack   webp   一：安裝vue-cli腳手架：
1：為了確保你的node版本在4.*以上，輸入 node -v 查看本機node版本，低於4請更新。
2：輸入：  npm install -g vue-c 



  
 

    


    
    
python 學習第三天(簡單購物系統)2018.2.20

     
 welcome   class   bic   繼續   please   python   else   pre   lease   
#_author_:"Bushii"
#data:2018/2/20

print("*******************************")
print("We 



  
 

    


    
    
Vue 學習隨筆四 - 路由介紹

     
   
專案新建成功後，我們嘗試著新增一個新的頁面。此時，我們需要使用VUE預設的router功能，在src/router下面有個index.js檔案。 
預設的是下面這個樣子： 
 
其中 import 代表匯入這個頁面，下面對應的有一個路由的定義，初始化的時候定義了一個 "/" 的預設路徑。 
這 



  
 

    


    
    
Vue 學習隨筆一 - 初始化

     
 Vue最近火的一塌糊塗，之前靠著年輕時候學過的一點jQuery皮毛，一直在勉強堅持做著前端的一些工作，個人水平不夠，不是說jQuery不好。但是想到年紀大了的人也要與時俱進，故，乘著專案空閒期，試了一下 VUE 和 Kotlin (java開發技術，在後續的文章會涉及)。這裡，我略過那些VUE怎麼高大上，怎麼 



  
 

    


    
    
Kafka學習（三）簡單例項（可以簡單做測試）

     
  
 
 java客戶端連線kafka簡單測試 本案例kafka版本是kafka_2.11-0.9.0.1，用java來實現kafka生產者、消費者的示例  在測試的過程中遇到的特別的問題以及解決辦法，其他小問題就不一一列舉了。 
 1 . 使用kafka-clients進行測試，maven依賴 
 



  
 

    


    
    
Node.js學習隨筆三，事件event

     
 Node.js 是單程序單執行緒應用程式，但是因為 V8 引擎提供的非同步執行回撥介面，通過這些介面可以處理大量的併發，所以效能非常高。 
Node.js 幾乎每一個 API 都是支援回撥函式的。 
Node.js 基本上所有的事件機制都是用設計模式中觀察者模式實現。 
Node.js 單執行緒類似進入一個w 



  
 

    


    
    
VUE 學習筆記 三 模板語法

     
 1.插值 
a.文字 
資料繫結最常見的形式就是使用“Mustache”語法 (雙大括號) 的文字插值 
 
 <span>Message: {{ msg }}</span> 
 
v-once 指令，你也能執行一次性地插值，當資料改變時，插值處的內容不會更新 
 
 <span 



  
 

    


    
    
Vue學習（三）——屬性繫結和雙向資料繫結

     
  
  
  
 <!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>屬性繫結和雙向資料繫結</title>
   <script src="./v 



  
 

    


    
    
webpack學習（三）：配置HtmlWebpackPlugin

     
  
  
  
 demo地址: https://github.com/Lkkkkkkg/webpack-demo webpack初步配置參照 https://blog.csdn.net/qq593249106/article/details/84892069 
 當前目錄結構: 
 |- /dist //用 



  
 

    


    
    
Vue學習（三）：數據綁定語法

     
 ESS   com   tle   pre   ext   分享圖片   info   sage   文本   
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   



  
 

    


    
    
VUE學習筆記(三)-子路由、多路由、巢狀路由、動態路由都是什麼鬼？

     
  
 
 
 最近學習到VUE路由這塊，發現這塊知識點有點多，好容易混亂，我的學習習慣就是先要建立框架，然後再去挨個學習搞懂，所以先來把概念搞搞清楚再說。 
 首先，我們要知道VUE路由建立的是單頁面路由。 
 子路由其實和單路由意思是一樣的，單路由應該很好理解，因為我們都知道路由是可以一層一層巢狀的，你可以 



  
 

    


    
    
Go語言學習（三） 簡單比特幣挖礦類實現

     
 
                //utils.go
package main

import (
	"bytes"
	"encoding/binary"
	"log"
)

func IntToHex(num int64)[]byte{
	buff:=new(bytes.Buffer)  //開闢記憶體， 



  
 

    


    
    
Vue學習之三 router 2 子路由

     
  
  
  
 
 
  繼續前面的寫一個子路由
  
   程式碼
  
 
  
 程式碼 
  
  新增兩個元件 HiVue1.vue HiVue2.vue 
  
 <template>
<div>
<h2> {{msg}} </h2>asfdasf 



  
 

    


    
    
zookeeper學習（三）：配置zookeeper叢集

     
 
							
							
							
安裝zookeeper的條件：
scp命令可以正常使用，jdk，mysql。
CentOS6.7
zookeeper-3.4.5

（1） 機器部署
安裝到3臺虛擬機器上
安裝好JDK
（2） 上傳
上傳用工具。
（3） 解壓
tar -zxvf zookee 



  
 

    


    
    
vue學習（三）完善模板頁(bootstrap+AdminLTE)

     
 
<template>
    <header class="main-header">
        <!-- Logo -->
        <a href="index2.html" class="logo">
            <!--  



  
 

    


    
    
MongoDB學習筆記(三)——安裝與配置MongoDB(Linux)

     
 
							
							
							前一篇博文講解了如何安裝與配置MongoDB的windows版，本篇博文接著上一篇講解如何在Linux系統中安裝與配置MongoDB，為了演示，我問同事要了它的雲伺服器用於演示，當然我自己也有，但是已經安裝了，就不解除安裝重新裝了[笑臉]。

下載Linux版的