vue脚手架项目搭建完整流程&vue引入bootstrap

vue脚手架搭建过程

1.检查vue -V判断当前设备是否有vue环境，如果没有就执行

cnpm install -g @vue/cli

2.再次检查vue -V看是否创建成功

3.创建vue项目的途径有vue ui（vue自己的图像界面化的工具），第二个是vue create 【项目名】

4.在使用命令创建时会问你一些问题，一路回车默认创建即可

5.创建完成后，会提示你进入相应的项目目录，执行npm run serve启动项目，等待启动完成后，你就可以看到vue的logo了。此时代表项目创建成功了。

6.项目中src文件夹是我们的源文件夹，所有的代码编辑工作在这个完成。

7.vue项目是一个spa项目，即全局只用一个vue页面，其他内容通过组件的方式或者路由的方式来进行引入。

8.在src的文件下面创建router文件夹，里面创建一个index.js文件，这里掌管整个项目的路由配置，需要在main.js进行相关配置。

9.当项目路由配置完毕，我们需要引入相关依赖，（这步可以在第8步之前做）在当前项目下面运行cnpm install vue-router --save

10.如果你项目需要用到ajax，那你需要添加另外一个依赖，cnpm install axios --save ，并且需要在main.js中进行注册。

vue项目引入第三方样式库bootstrap

1.已安装的话先卸载bootstrap，再安装

cnpm install bootstrap@3 --save(cnpm uninstall bootstrap)

2.安装jQuery

cnpm install jquery --save

3.在项目的根目录中，与package.json同级，创建一个vue.config.js，内容如下：

const webpack = require('webpack')
module.exports = {
	chainWebpack: (config) => {
		config.plugin('provide').use(webpack.ProvidePlugin, [{
			$: 'jquery',
			jquery: 'jquery',
			jQuery: 'jquery',
			'window.jQuery': 'jquery'
		}])
	},
	css: {
		sourceMap: true
	}
}

4.在页面中的script标签中写2句代码，完成引入

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'