vue 脚手架搭建过程
-
检查 vue -V 判断当前设备时候有vue环境 , 如果没有就执行 cnpm install -g @vue/cli
-
再次检查 vue -V 看是否创建成功
-
创建vue 项目的途径有 vue ui (vue 自己的图形界面化的工具) , 第二个是 vue create 【项目名】
-
在使用命令创建时会问你一下问题, 一路回车默认创建即可
-
创建完成后,会提示你进入相应的项目目录 , 执行 npm run serve 启动项目,等待启动完成后,你就可以看到vue logo了 此时代表项目创建成功
-
项目中 src 文件夹是我们的源文件夹, 所有的代码编辑工作这里完成
-
vue 项目是一个 spa 项目, 即全局只用一个vue 页面, 其他内容通过组件的方式或者路由方式来进行引入
-
在src 的文件下面创建 router 文件夹 , 里面新建一个index.js 文件,这里掌管整个项目路由配置, 需要在main.js 进行相关配置
-
当项目路由配置完后,我们需要引入相关依赖,(这步可以在第8步之前做) 在当前项目下面运行 cnpm install vue-router --save
-
如果你项目需要用到 ajax , 那你需要添加另外一个依赖, cnpm install axios --save 并且要在main.js 中进行注册
vue 项目引入第三方样式库 , bootstrap
-
cnpm install bootstrap@3 --save (cnpm uninstrall boostrap)
-
cnpm install jquery --save
-
在项目的根目录中,与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 } }
-
在你要使用bootstrap样式的vue页面中script标签写两句代码,完成引入
import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min.js'
-
-