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

作者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) 這一步選no

2.找到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 ,添加如下代碼