目录(直接Ctrl+F跳到那里，简书的markdown不能直接锚点跳转
1-配置环境
2-cnpm 常用的命令
3-安装vue脚手架
4-VUE webpack训练
5-接下来是Bootstrap
6-还有JQuery
7-vue引入bootstrap和jQuery
1配置环境
Webstorm
node # 配置path用命令测试node --version成功说明node已经配置成了
cnpm自己百度淘宝镜像源
2常用命令
cnpm install packagename 0.0.1#安装一个第三方的包
cnpm install#首先cd进project的目录然后直接安装需要的所有依赖
cnpm outdated#列出所有的过时模块
cnpm update#升级所有模块
cnpm run dev #独立运行前端项目
cnpm -g cnpm 升级cnpm
3安装vue脚手架
1.cnpm install vue-cli -g //全局安装 vue-cli
2.cd 进文件夹
3.vue init webpack 项目名，最后三个选项选no不启用严格模式
4.cnpm install
5.cnpm run dev
开始使用VUE webpack训练习得基本结构
cd 进目录文件夹，cnpm init 创建了一个node项目生成package.json
cnpm i vue vue-router webpack
cnpm i vue-template-compiler css-loader
接下来是Bootstrap
首先是可视化构建网站
http://www.bootcss.com/p/layoutit/ 这个是中文的好像不如英文的全
https://www.layoutit.com/build 这是英文的，反正都可以直接复制代码对于不专注前端的这些就够用,elementUI不能拖拽（遂弃之
中文站的一些代码复制到template的时候会失效，报错是
Uncaught DOMException: Failed to execute 'querySelector' on 'Document'无效的selector
英文版的没有出现，不知道是哪个地方冲突了希望后面不要有坑
哪个好心的程序员找到了评论吱一声
基本知识：
1.bootstrap提供的额外标签
<mark></mark>文字描边加重
<del></del>文字带有删除线
<ins></ins>文字带有下划线
<strong></strong>加重
<small></small>减轻
<em></em>斜体
2.文字对齐类
<p class="text-left" ></p>文字左对齐
<p class="text-center" ></p>文字左对齐
<p class="text-right" ></p>文字左对齐
<p class="text-lowercase" ></p>文字左对齐
<p class="text-uppercase" ></p>文字左对齐
<p class="text-capitalize" ></p>文字左对齐
.pul-left元素浮动到左边
.pul-right元素浮动到右边
.center-block 设置元素为display:block 并居中显示
.clearfix清除浮动
.show强制元素显示
.hidden强制元素隐藏
.sr-only除了屏幕阅读器外，其他设备上隐藏元素
.sr-only-focusable|与.sr-only 类结合使用，在元素获取焦点时显示（如：键盘操作的用户）
.text-hide将页面元素所包含的文本内容替换为背景图
.close显示关闭按钮
.caret显示下拉式功能
3.表格样式
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>头行
<th>头标1</th>
<th>头标2</th>
<th>头标3</th>
<th>头标4</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
<tr class="warning">新开一行
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
<tr class="info">
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
<tr class="success">
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
</tbody>
柔和灰（text-muted）、主要蓝（text-primary）、成功绿（text-success）、信息蓝（text-info）、警告黄（text-warning）、危险红（text-danger）这一行（列）都会变成这样，bootstrap的颜色也大部分是这样来的
4.表单
用一个div包裹起来的表单对div进行改变样式即可
form-contorl是表单的样式
<from class="form-inline">#加了这个class 就会横向排列啦
<div class="form-group">
<input type="text" class="form-control" placeholder="这是一个输入框" input-lg>有input-lg就会变大sm就会变小
</div>
<div class="form-group has-success">#会改变颜色
<label for="">这是一个选择框：</Label>
<select class="form-control" name="" id="" >
<option value="">北京</option>
<option value="">北京</option>
<option value="">北京</option>
<option value="">北京</option>
</select>
</div>
<div class="form-group">
<label for="">这是一个文本框：</label>
<textarea class="form-control" name="" id="" cols="30" rows=1"10"></textarea>
</div>
</from>
5.按钮
需要更多样式直接去bootstrap官网找找
<button class="btn btn-default btn-1g">这是一个按钮</button>
<button class="btn btn-success btn-sm">这是一个按钮</button>
<button class="btn btn-primary activel">这是一个按钮</button>
<button class="btn btn-info btn-blockl">这是一个按钮</button>
<button class="btn btn-warning"disabled="disabled">这是一个按钮</button>
<button class="btn btn-danger">这是一个按钮</button>
<button class="btn btn-link">这是一个按钮</button>
<a class="btn btn-danger" href="">这是a标签所写的按钮效果</a>
还有jQuery
咕咕咕~
vue引入bootstrap和jQuery
参照着
https://segmentfault.com/a/1190000015765805
https://blog.csdn.net/qq_34200964/article/details/81436449
做的
cnpm install jquery --save-dev
cnpm insatll bootstrap --save-dev
我这里提示缺少popper.js依赖，缺啥安啥
cnpm install --save popper.js
修改webpack
build文件夹下的webpack.base.conf.js
在开头加入var webpack=require('webpack');
在module.exports最后面加入（即webpack.base.conf.js文件末尾加入）plugins块；
修改resolve块
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
var webpack=require('webpack');//修改这里
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'assets': path.resolve(__dirname, '../src/assets'),//这里
'jquery': "jquery/src/jquery"//这里
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
},
plugins: [//添加这个pluging
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
})
]
}
在mian.js中直接引入
import 'jQuery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
实验代码
把这个粘贴进一个组件中
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
<br>
<li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
</ul>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-info">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>
<div id="cc">cc</div>
<h4>提示工具（Tooltip）插件 - 锚</h4>
这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"
title="默认的 Tooltip">
默认的 Tooltip
</a>.
这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"
data-placement="left" title="左侧的 Tooltip">
左侧的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="top"
title="顶部的 Tooltip">
顶部的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom"
title="底部的 Tooltip">
底部的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="right"
title="右侧的 Tooltip">
右侧的 Tooltip
</a>
<br>
<h4>提示工具（Tooltip）插件 - 按钮</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip"
title="默认的 Tooltip">
默认的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="left" title="左侧的 Tooltip">
左侧的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="top" title="顶部的 Tooltip">
顶部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="bottom" title="底部的 Tooltip">
底部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="right" title="右侧的 Tooltip">
右侧的 Tooltip
</button>
</div>
</template>
<script>
$(function () {
alert(123);
$(".btn:eq(1)").click(function(){
alert("abc");
})
});
$(function () { $("[data-toggle='tooltip']").tooltip(); });
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
效果是这样的
