1. 安装vue的包： cnpm i vue -S
2. 由于 在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装 能解析这种文件的 loader cnpm i vue-loader vue-template-complier -D
3. 在 main.js 中，导入 vue 模块 import Vue from 'vue'
4. 定义一个 .vue 结尾的组件(例如，login.vue )，其中，组件有三部分组成： template、 script 、style
5. 使用 import login from './login.vue' 导入这个组件
6. 创建 vm 的实例 var vm = new Vue({ el: '#app', render: c => c(login) })
7. 在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域；

webpack 中如何使用 vue的更多相关文章

  1. webpack中如何使用vue

    1.安装 vue包:npm i vue -S 2.由于在webpack中,推荐使用.vue这个组件模版文件来定义组件,不然会出现vue.js移动和一些高级语法的不支持,因此需要安装能解析这种文件的lo ...

  2. 总结梳理:webpack中如何使用vue

    1. 安装vue的包 cnpm i vue -S  2. 由于在webpack中,推荐使用 .vue这个组件模板文件定义的组件,所以,需要安装,   能解析这个文件的loader: cnpm i vu ...

  3. 在Vue的webpack中结合runder函数

    在Vue的webpack中结合runder函数 1.引入: <h1>下面是vue的内容:</h1> <div id="app"> <log ...

  4. 在webpack中配置vue.js

    在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...

  5. vue2.0基础知识，及webpack中vue的使用

    ## 基础指令 ## [v-cloak]{         Display:none;     }     <p v-cloak>xx{{msg}}xx</p> //解决闪烁问 ...

  6. webpack 中导入 vue 和普通网页使用 vue 的区别（四）

    一:在普通网页中使用 vue 使用 script 标签,引入 vue 包 在 ndex 页面中,创建一个 id 为 App 的 div 容器 通过 new Vue 得到一个 vue 实例 二:在 we ...

  7. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  8. 使用pug(jade),以及在vue+webpack中使用pug(jade)

    一:在HTML中使用pug 在css中有预处理器less和scss来使我们的样式表更加的简介,那么在HTML中有没有这样的格式呢,答案是有的,那就是pug(前身是jade),效果如下: 转译以后 好, ...

  9. webpack中使用vue

    1.安装vue cnpm i install -S 2.由于在 webpack 中,推荐使用 .vue 的文件模板文件定义组件 , 所以 ,需要安装 能解析这种文件的 loader cnpm i vu ...

随机推荐

  1. 使用 nodejs 和 axios 以及 cherrio 爬取天气预报

    安装依赖 引入依赖 发送请求 解析请求的返回值 以下代码可以复制直接运行,获得 7 天的天气预报 const axios = require('axios') const cheerio = requ ...

  2. Spring Cloud云架构 - SSO单点登录之OAuth2.0登录认证(1)

    今天我们对OAuth2.0的整合方式做一下笔记,首先我从网上找了一些关于OAuth2.0的一些基础知识点,帮助大家回顾一下知识点: 一.oauth中的角色 client:调用资源服务器API的应用 O ...

  3. lines

    lines Time Limit: 5000/2500 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  4. js for循环中i++与++i有什么区别

    平时都是这样写的for循环, 1 2 3 for(var i = 0; i < 20 ; i++){        ....       } 但我看有的人这样写 for (var i = 0; ...

  5. 配置Nginx和Apache允许指定域名CORS跨域访问

    前后端分离开发,导致前端项目需要跨域请求后端接口,解决方法有很多,本文只介绍两个: 1. 修改后端程序代码实现允许跨域请求 2. 修改服务器配置文件实现允许跨域请求 正文: 方法1:修改后端程序代码实 ...

  6. 一、基础篇--1.1Java基础-反射的用途和实现

    https://blog.csdn.net/SongYuxinIT/article/details/81872066 反射的核心是JVM在运行时才动态加载类或调用方法/访问属性,它不需要事先(写代码的 ...

  7. leetcode-mid-backtracking -22. Generate Parentheses-NO

    mycode    没有思路,大早上就有些萎靡,其实和上一个电话号码的题如出一辙啦 参考: class Solution(object): def generateParenthesis(self, ...

  8. JS 替换所有的空格

    在JS中替换掉输入框内的空格,是在处理表单需求的时候极为常用的一项操作,以防止用户的操作习惯引起数据异常,保证传参的安全性. NO.1 name.replace(" "," ...

  9. maven 安装jar包命令

    以 spring-context-support-3.1.0.RELEASE.jar 为例,在 @3图中已经给出这个 jar 包的 groupId,artifactId,version信息,手动安装的 ...

  10. MVC、MVP 和 MVVM

    MVC Model–View–Controller 模型:管理应用程序的数据.逻辑和规则 视图:展示数据(可以直接从模型中获取数据) 控制器:接收输入并将其转化成模型和视图的命令 MVP Model– ...