vue项目引入bootstrap

vue项目引入bootstrap

1、创建项目：

	$ vue init webpack Demo		//Demo为项目名称
    					
	? Project name (Demo) demo		//这里的项目名称不能填大写
	
	? Project description (A Vue.js project)  2018.11.13  	//这里是项目描述
	
	? Author mdr		//这是作者
	
	? Vue build (Use arrow keys)
	
	> Runtime + Compiler: recommended for most users
	  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific H
	TML) are ONLY allowed in .vue files - render functions are required elsewhere
					//这一步直接回车
				
	? Install vue-router? (Y/n) y  //这里需要安装路由
	
	? Use ESLint to lint your code? (Y/n) n 	//这里不需要
	
 	? Set up unit tests (Y/n) n 	//这里也不需要
	
	? Setup e2e tests with Nightwatch? (Y/n) n 		//这里也不需要
	 
	? Should we run `npm install` for you after the project has been created? (recom
	mended) (Use arrow keys)
	> Yes, use NPM
	  Yes, use Yarn
	  No, I will handle that myself				//	这里我选择npm，直接回车

2、让vue支持jquery

2.1：安装jquery：

   	Administrator@SC-201811051400 MINGW64 /d/WorkWord/WEB
   	$ cd Demo
   	Administrator@SC-201811051400 MINGW64 /d/WorkWord/WEB/Demo
   	$ npm i jquey -D

2.2 安装支持css：

npm install style-loader -D
npm install css-loader -D
npm install file-loader -D

2.3 修改build文件夹下面的webpack.base.conf.js文件，在文件后在头部加入：

var webpack = require('webpack')

2.4 在module.exports = {}添加：

plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "windows.jQuery": "jquery"
  })
],

2.5 在alias: 里面添加

'assets': resolve('../src/assets'),
'components': resolve('../src/components'),
jquery: "jquery/src/jquery"

2.6 下载Bootstrap文件包，然后把css、js、fonts三个文件夹复制到vue项目的src\assets目录下：

2.7 修改HelloWorld.vue文件：

<template>
  <div class="container">
   		<header class="page-header">this is vue+boostrap</header>
   		<button @click="dw" class="btn btn-success">button</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
  	dw(){
  		alert('Hello World')
  	}
  }
}
</script>

<style scoped>
</style>

3、运行程序：

$ npm run dev

3.1 结果:

参考来源：https://blog.csdn.net/ansu2009/article/details/53305134