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

时间：2017-08-13 14:44:01 阅读：380 评论：0 收藏：0 [点我收藏+]

作者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不会自动编译刷新