使用Git Bash Here 创建的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