Mac下用vue-cli+webpack+bootstrap实现一个todo-list(一)
2017-11-22 12:08
711 查看
新建项目
考虑到npm较慢,这里使用cnpm
因为使用了bootstrap,而bootstrap中的js是依赖jquery的
下载bootstrap包
这里用的版本是3.3.7。
下载下来后将fonts,js,css文件夹分别放到项目目录/src/assets下。
配置jquery
打开config文件夹下的webpack.base.conf.js文件,在文件头中加入对webpack的引用,在整个配置对象的末尾增加plugins配置
引入bootstrap
在src/main.js文件的顶部加入如下对bootstrap主要文件的引用
考虑到npm较慢,这里使用cnpm
安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 全局安装vue-cli,这样以后就可以不用在每个项目下安装vue-cli了 cnpm install -g vue-cli 创建一个基于webpack的vue模版 cnpm install webpack vue-todolist cd vue-todolist 安装依赖 cnpm intall
因为使用了bootstrap,而bootstrap中的js是依赖jquery的
安装jquery cnpm install jquery --save-dev
下载bootstrap包
这里用的版本是3.3.7。
下载下来后将fonts,js,css文件夹分别放到项目目录/src/assets下。
配置jquery
打开config文件夹下的webpack.base.conf.js文件,在文件头中加入对webpack的引用,在整个配置对象的末尾增加plugins配置
const webpack = require('webpack') plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ]
引入bootstrap
在src/main.js文件的顶部加入如下对bootstrap主要文件的引用
import './assets/css/bootstrap.min.css' import './assets/js/bootstrap.min' 运行npm run dev
相关文章推荐
- Mac下用vue-cli+webpack+bootstrap实现一个todolist(二)
- windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
- 详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
- 用vue的双向绑定简单实现一个todo-list的示例代码
- 详解vue-cli快速构建vue应用并实现webpack打包
- 使用Vue-cli下载一个以webpack打包的vue模板
- vue-cli 快速构建vue应用,实现webpack打包
- 基于Webpack, KnockoutJs,esyui,koeasyui实现类vue-cli生成的模板框架
- vue-cli+webpack实现多页面应用的配置
- vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
- Vue.js实现一个todo-list的上移,下移,删除功能
- 如何在vue-cli+webpack构建的项目引入jquery和bootstrap
- vue项目开发(一) 利用vue-cli+webpack构建一个vue项目
- vue-cli+webpack在生成的项目中使用bootstrap方法(一)
- vue-cli起的webpack项目 用localhost可以访问,但是切换到ip就不可以访问 我用的是vux起的一个项目(移动端,基于vue的),因为是移动端的,需要在手机上测试,发现用
- Vue.js实现一个todo-list的上移下移删除功能
- vue-cli+webpack在生成的项目中使用bootstrap方法(二)
- vue-cli+webpack在生成的项目中使用bootstrap实例代码
- 详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- vue-cli的webpack模板项目配置文件分析