webstorm+vue组件开发准备

Vue使用

 

 

 

一、准备工具

webstorm 、 nodejs 、vue配置

 

二、webstorm创建一个空项目

 

三、进入 dos cmd 命令输入，切换到项目目录下，安装依赖

1. npm init or npm init -y ，会多出一个文件

 

 

2. npm install webpack webpack-dev-server babel-core babel-loader babel-preset-es2017 babel-preset-stage-0 css-loader style-loader less less-loader file-loader url-loader html-webpack-plugin --save-dev

安装所有能用到的依赖包（包括js、html、css、打包、和打包服务）

 

3. 然后依赖自动安装成功

 

 

4. 再来看

 

5. 创建 、

 

Let报错？

解决：设置JavaScript为ES6

 

 

6. 上面依然使用上了，index.html模板 和 main.js入口文件

7. 然后打包和查看效果，修改配置

 

8. 然后dos执行npm run dev查看效果

 

 

擦，遇到问题，查一查，参考意见：

http://blog.csdn.net/jiang7701037/article/details/79403637

 

解决办法：全局安装webpack-cli
npm install webpack-cli -g

结果：一样

 

再然后：

npm install webpack-cli -D

npm install webpack -D

OK成功，看结果

 

 

打开浏览器chrome，访问本地服务 http://localhost:8080/或

成功，没有报错。

 

 

然后编辑文件：

 

 

 

然后，设置添加.vue文件模板

 

 

.vue模板默认标签：

<template>

    <div></div>

</template>

 

<script>

    export default{

        data(){

            return {}

        },

        methods:{},

        computed:{},

        components:{},

    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

 

</style>

 

然后创建新文件app.vue: 要使用.vue文件，需要安装编译使用的插件：

 

安装 vue-loader解析vue文件的， vue-template-compiler用来解析vue模板的

npm install vue-loader vue-template-compiler

添加依赖库，编辑：    

 

 

然后编辑使用：

 

 

 

查看效果，dos：npm run dev

 

浏览器访问：