前言
搭建 vue+webpack 项目, 使用 vue-cli 搭建项目.
准备
vue 独立项目依赖 node 的 NPM 包管理器, 所以需要先安装 node.
相关的 NPM 常用命令文章:
NPM - 常用命令, 点击访问
Vue 官方文档, 点击访问 https://cn.vuejs.org/v2/guide/
步骤
安装 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 环境的配置;
config: 环境变量配置;
dev.env.JS: dev 环境变量配置;
index.JS dev 和 prod 环境的一些基本配置;
prod.env.JS: prod 环境变量配置;
node_modules: NPM 安装的依赖代码库;
src: 项目源码;
static: 存放 CSS,JS 等静态资源;
.gitkeep: 使这个空文件也能够提交到版本库;
.babbelrc: babel 相关配置 (babel: 将 ES6 语法转换成大多数浏览器可以识别的 ES5 语法);
.editorconfig: 编辑器的配置, 修改编码, 缩进等;
.eslintignore: 设置忽略语法检查的目录文件;
.eslintrc.JS: eslint 的配置文件, 管理和检测 JS 代码风格的工具;
.gitignore: Git 不纳入版本, 需要忽略的文件;
.postcssrc.JS: 用于添加浏览器私缀 (兼容不同浏览器的 CSS 样式);
index.html: 入口 HTML 文件;
package-lock.JSON: 是锁定安装时的包的版本号, 并且需要上传到 Git, 用以保证开发人员的开发环境一致;
package.JSON: 项目的配置文件, 项目描述, 命令, 依赖插件等;
README.md: 项目描述等主要文档;
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:
安装过程:
安装 popper
安装 jQuery
安装 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
在 build 目录下的 webpack.base.conf.JS 中加入:
const webpack = require('webpack')
配置 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
如果喜欢的话, 欢迎关注 weyoung 公众号...
来源: https://www.cnblogs.com/nelucifer/p/11575570.html