vue 脚手架搭建过程

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. cnpm install bootstrap@3 --save (cnpm uninstrall boostrap)

    2. 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. 在你要使用bootstrap样式的vue页面中script标签写两句代码，完成引入

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