Vue-学习笔记0-独立项目搭建

前言

搭建Vue+Webpack项目，使用vue-cli搭建项目。

准备

vue独立项目依赖node的npm包管理器，所以需要先安装node。
相关的npm常用命令文章：

• Npm-常用命令，点击访问
• Vue官方文档，点击访问

步骤

安装vue-cli脚手架

npm install -g vue-cli

选择webpack模板

# vue init webpack 项目名称
vue init webpack lx-note-front

等待命令执行完毕。

由以上界面我们可以看到，要想运行该项目，可以执行命令：

cd lx-note-front

运行项目

执行命令

npm run dev

出现以上界面说明我们已经搭建成功。

项目目录讲解

• build: webpack配置相关； build.js: npm run build所执行的脚本；
• check-versions.js: 检查npm和node的版本；
• utils.js: 工具方法，主要用于生成CSSLoader和styleLoader配置；
• vue-loader.conf.js: vueloader的配置信息；
• webpack.base.conf.js: dev和prod的公共配置；
• webpack.dev.conf.js: dev环境的配置；
• webpack.prod.conf.js: prod环境的配置；

webpack打包vue项目

webpack是什么？

webpack是个模块打包器，能够根据html、css、js、图片等文件之间的依赖关系将所有的模块打包起来。

# 重新生成打包js
webpack --display-modules --display-chunks --config webpack.config.js
# 实时自动打包 webpack -w
webpack --watch
# 显示异常信息
webpack --display-error-details
# 压缩混淆脚本
webpack -p
# 提供source map，方便调式代码
webpack -d

webpack vue项目中安装Bootstrap

Bootstrap依赖jQuery，因此引入Bootstrap之前需要引入jQuery，jQuery依赖popper.js：
安装过程：

1. 安装popper
2. 安装jquery
3. 安装bootstrap

引入popper依赖

npm install popper.js --save-dev

引入jQuery依赖

npm install jquery
# 或者限定jQuery的版本
npm install jquery@3.3.1 --save-dev

引入Bootstrap依赖

npm install bootstrap@3.4.1 --save-dev

引入jquery和bootstrap

1. 在build目录下的webpack.base.conf.js中加入：

const webpack = require('webpack')

1. 配置jQuery：在上述文件中找到 module.exports找到plugins，没有的话请创建，格式如下：

plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'windows.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
]

在main.js 中引入jQuery和bootstrap

import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

完了之后可以添加bootstrap的样式及带有$符号的方法可以测试是否引入成功。

引入其他插件

npm install bootstrap-table@1.14.2 --save-dev
npm install admin-lte@2.4.5 --save-dev
npm install bootstrap-dialog@1.34.6 --save-dev
npm install bootstrapvalidator@0.5.4 --save-dev