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

 

浏览器访问:

 

 

 

 

Logo

前往低代码交流专区

更多推荐