详解vue-cli快速构建项目以及引入bootstrap、jq

前端之家收集整理的这篇文章主要介绍了详解vue-cli快速构建项目以及引入bootstrap、jq前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

vue-cli脚手架工具快速构建项目架构:

。。首先默认了有已经安装了node。。。

npm install -g vue-cli 全局安装vue-cli

vue init webpack cnm 生成项目名为cnm的的项目模板,cnm自定义

npm install 到cnm文件夹中打开Git bash或者命令窗口初始化安装依赖

此时文件夹目录应该是这样

然后输入npm run dev。。不出意外浏览器会自动弹出一个欢迎页面,如果不自动弹出就打开http://localhost:8080

到这里就可以在对应的文件修改代码开发项目了。。。但是如果要引入一些插件或者框架怎么办呢?

引入jq:

输入 npm install jQuery --save-dev 用npm下载jq依赖、

找到build文件夹下的webpack.base.conf.js文件打开,修改配置:

1、加入webpack对象:

2、在module.exports里面加入:

3、在入口文件main.js中加入

全局引入jq

引入bootstrap:

1、修改webpack.base.conf.js文件

2、在入口文件main.js中加入:

3、在assets文件目录中拷贝bootstrap各种文件

试试bootstrap引入成功没:

打开hello.vue文件

替换组件模板

如果引入成功

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Bootstrap相关文章