vue+webpack+vue-cli+WebStrom 項目搭建

標籤：index   settings   lan   uil   rip   turn   ati   ret   模板   

作者QQ：1095737364    QQ群：123300273     歡迎加入！ 1.安裝 webpack 和vue-cli 模組: npm install webpack -g npm install vue-cli -g 2.進入到建立項目的目錄裡面執行以下命令建立項目:　　 vue init webpack hiibook_find 3.然後進入到使用cd 命令進入到建立的hiibook_find目錄下面安裝package.json中的模組: cnpm install 4.然後執行命令看是否正常運行: npm run dev 5. 刪除node_modules 檔案夾(防止WebStrom卡頓:mode_modules檔案可能非常的多,而WebStrom會為每一個檔案建立索引,因此會出現卡死的現象),使用WebStrom開啟hiibook_find項目: 6. 建立node_modules,然後右擊檔案-->選擇Make directory as-->Excluded 7.然後點擊: terminal 8.運行 cnpm install 9. Intellij IDEA 安裝 vue.js 外掛程式:setting-->plugins-->搜尋vue,找到vue.js -->安裝-->重啟WebStrom配置vue 模板的提示資訊setting-->搜尋File Types 預設建立vue檔案的摸版:  模板內容: 

   <template>    <div class="">    </div></template><script>    export default {        data () {            return {}        },        props: {},        computed: {},        components: {},        methods: {},        watch: {},    }</script><style scoped></style>

配置ECMAScript 6:settings --> languages& frameworks -- > javascript ,選擇javascript,修改內容地區的javascript language version: ECMAScript 6 配置:webstorm修改檔案，webpack-dev-server不會自動編譯重新整理   10.配置Edit_Configurations   11.設定參數:  12.點擊運行,瀏覽器中輸入:http://localhost:8080/#/出現頁面,配置成功,運行正常!!  13.注意:ESLint 要求代碼必須規範,影響開發速度ESLint 刪除:1.Use ESLint to lint your code? (Y/n) 這一步選no2.找到build-->webpack.base.conf.js 刪除以下代碼:   　　3.搜尋package.json檔案中 "ESLint"關鍵詞 ,刪除所有的相關外掛程式  補充:ESLint :1.ESLint 主要有以下特點：

• 預設規則包含所有 JSLint、JSHint 中存在的規則，易遷移；
• 規則可配置性高：可設定「警告」、「錯誤」兩個 error 等級，或者直接禁用；
• 包含代碼風格檢測的規則（可以丟掉 JSCS 了）；
• 支援外掛程式擴充、自訂規則。

2.Eslint的配置方式可以通過以下三種方式配置 ESLint:1）使用 .eslintrc檔案（支援 JSON 和 YAML 兩種文法）；2）在 package.json中添加 eslintConfig 配置塊；3）直接在代碼檔案中定義。 14.vue 去掉#號地址:找到router-->index.js ,添加如下代碼  

vue+webpack+vue-cli+WebStrom 項目搭建