在webpack构建的项目中使用vue

一、
复习在普通网页中使用vue
1.使用script引入vue
2.在index中创建 id为app的容器
3.通过new vue得到vm实例
二、
在webpack中尝试使用vue:
//注意 : 在webpack中 使用 import Vue from ‘vue‘ 导入的Vue构造函数,功能不完整,只提供了runtime-onley的方式 病没有提供想网页中那样的使用方式
npm install vue -S

import Vue from ‘vue‘
// import Vue from ‘../node_modules/vue/dist/vue.js‘

var vm = new Vue({
el:‘#app‘,
data:{
msg:‘123‘
}
})

webpack.config.js

resoleve: {
alias:{ //修改vue被导入包时候的路径
‘vue$‘: ‘vue/dist/vue.js‘
}
}

原文地址:https://www.cnblogs.com/suanmei/p/9600176.html

时间: 2024-10-30 00:10:03

在webpack构建的项目中使用vue的相关文章

webpack 4.x 解决 webpack-dev-server工具在webpack构建的项目中使用问题

首先将webpack-dev-server安装到项目中 npm install webpack-dev-server -D 这时在powershell中敲 webpack-dev-server 会发现 'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序 或批处理文件. 这是由于该工具只是安装到本地项目中了 纳尼? 难道要全局安装一下吗??? 没必要!!!这时只需在根目录的package.json中"scripts"下中添加 "dev":

导入开源库到基于Android Studio构建的项目中

前两天,谷歌发布了Android Studio 1.0的正式版,也有更多的人开始迁移到Android Studio进行开发.然而,网上很多的开源库,控件等还是以前的基于Eclipse进行开发,很多人不知道怎么导入到自己的基于Android Studio项目中来,微博上也有人私信我,让我来写写,正好今天回来的比较早,就写写吧.主要介绍一下常见的一些导包的场景. 前言 --project //项目目录 | build.gradle //项目的gradle配置文件 | settings.gradle

gulp+webpack构建前端项目

本文将介绍如何利用gulp+webpack构建一个基本的前端项目.假设你已经安装了node环境并且会使用简单的命令行 1.gulp安装 (1)全局安装 npm install gulp -g (2)查看gulp是否安装成功 gulp -v (3)进入本地目录,新建gulpfile.js 2.安装gulp-webpack插件 基于gulp的插件非常多,建议大家查看npm官网https://www.npmjs.com (1)安装 webpack的用途主要是模块化+打包.安装敲入命令 npm inst

webpack构建react项目的配置文件

webpack是一个模块打包工具,处理模块之间的依赖同时生成对应模块的静态资源. webpack把项目中所有的静态文件都看作一个模块 模快之间存在着一些列的依赖 多页面的静态资源生成(打包之后生成多个静态文件,涉及到代码拆分) webpack.config.js文件 //__dirname是node.js中的一个全局变量,它指向当前执行脚本所在的目录 //webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugi

Vue项目中 App.vue文件

在App.vue文件中,定义了一个id为app的div,在这个div板块中放置Helloworld组件,文件内容如下图所示: 在整个vue文件中,分为三部分内容, 第一部分是<template></template>包含的HTML页面内容 ,开发人员可以在这里设计页面展现的内容,并通过vue的一些语法加以控制, 比如v-if  .v-for  等等: 第二部分是<script></script>包含的页面逻辑的实现函数,关于这部分内容,后续会有详细的讲解,此

Vue+webpack构建一个项目

1.安装CLI命令的工具  推荐用淘宝的镜像 npm install -g @vue/cli @vue/cli-init 2.使用命令构建一个名为myapp的项目 vue init webpack myapp vue -v 可以查看版本号(V大写)----------------------------构建项目信息详解 - Project name:项目名 - Project description: 项目描述 - Author: 作者 - Vue build: - 第一种:配合大部分的开发人员

webpack构建react项目(一)

前言 下面是我们使用到技术栈: webpack + react + redux + react-router + react-thunk + ES6 + .... 注意事项: 建议使用npm5.X 或者 yarn 包管理工具(最好不要使用cnpm,虽然安装包速度上很快,但是在文件关联上会有坑,之前用的时候被坑过) 一.新建项目目录 config : webpack 配置文件 dist: 打包后代码 src: 源码目录 二.基础配置 安装基础的包 // 生成默认package.josn 文件 np

vue项目中app.vue 、main.js和 index.html的关联

1.main.js是我们的入口文件,主要作用是初始化vue实例并使用需要的插件. import Vue from 'vue' import App from './App' /* eslint-disable no-new */ new Vue({ el: '#app', template: '<App/>', components: { App } }) 2.App.vue是我们的主组件,所有页面都是在App.vue下进行切换的.其实你也可以理解为所有的路由也是App.vue的子组件.所以我

webpack4.0在项目中的安装配置

webpack4.0在项目中的安装配置 最近在学vue,刚好学到了webpack,因为看的教程比较老,他们用的都是webpck4.0以下的版本,我一步一步跟着教程的步骤来,发现教程里一点问题都没有,到我自己做的时候就遇到了几个坑,趁着还记得比较清楚,把它记下来. 安装webpack 全局安装webpack: 命令行执行: npm i webpack -g 局部安装(项目中安装): 我用的是VSCode,在VSCode的 powershell 终端中直接运行 cnpm i webpack -D 项