搭建Vue+Webpack项目,使用vue-cli搭建项目。
vue独立项目依赖node的npm包管理器,所以需要先安装node。
相关的npm常用命令文章:
npm install -g vue-cli
# vue init webpack 项目名称 vue init webpack lx-note-front
等待命令执行完毕。
由以上界面我们可以看到,要想运行该项目,可以执行命令: cd lx-note-front
打开项目目录,命令执行完成后的项目结构:
执行命令 npm run dev
命令启动该项目,项目启动效果如下:
出现以上界面说明我们已经搭建成功。
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
Bootstrap依赖jQuery,因此引入Bootstrap之前需要引入jQuery,jQuery依赖popper.js:
安装过程:
npm install popper.js --save-dev
npm install jquery # 或者限定jQuery的版本 npm install jquery@3.3.1 --save-dev
npm install bootstrap@3.4.1 --save-dev
const webpack = require('webpack')
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
我来评几句
登录后评论已发表评论数()