1.脚手架：
（1） npm install -g vue-cli
（2） vue init webpack 文件名
（3） 初始化 npm install
（4） 启动项目 npm run dev
2.安装axios：
（1） npm install axios
（ 2） npm install --save axios vue-axios
（3） 在main.js中引入：
import Vue from ‘vue’
import axios from ‘axios’
import VueAxios from ‘vue-axios’
Vue.use(VueAxios,axios)
（4） vue实例化引入axios
3.安装vuex：
（1） npm install vuex --save
（2） 建一个store文件夹
（3）store index.js在文件夹中引入
import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex)
export default new Vuex.Store({})
（4） 在main.js中引入：
import store form ‘./store/index’
new Vue({ store, }) 引入store
（5） 在APP.vue引入
import store from './store/index.js'
export default {
store
}
内容结构图
4.安装sass：
（1） npm install --save-dev sass-loader
（2） npm install --save-dev node-sass
（3） 在build文件夹下的webpack.base.conf.js的rules
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}
（4）在对应的style标签中引入 lang='scss'
5.安装 jquery 与 bootstrap:
1.首先 bootstrap 依赖于 jQuery ==>> 先安装jQuery
（1）npm install jquery --save-dev
（2）在build 文件夹下 webpack.base.conf.js 文件中添加如下内容：
var webpack = require('webpack')
（3） 在build 文件夹下 webpack.base.conf.js 文件中的module.exports 下 添加如下内容：
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery", $: "jquery"
})
],
（4） 在src/main.js文件中 引入jquery
import $ from 'jquery'
实例化：new Vue({ $, })
2.在安装 bootstrap
（1）npm install bootstrap --save-dev
（2） 在main.js中引入：
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
注：如有报错可试着结束重新启动，按命令下载依赖即可
6.安装element-UI
（1）npm i element-ui -S
（2）在 main.js 中写入以下内容：
import Vue from 'vue'; import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
7. vue swiper
（1）cnpm install less-loader --save
（2）cnpm install css-loader --save
（3）cnpm install vue-awesone -save
（4）在mian.js中引入：
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
（5）修改build\webpack.base.conf.js文件，添加下面代码
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
}
（6）对应的组件中写入：
export default {
data () {
return {
swiperOption: {
notNextTick: true,
pagination: {
el: '.swiper-pagination'
},
autoplay:1000,
loop: true,
autoplaydisableOnteraction: true,
slidesPerView: 'auto',
centeradSlides: true,
paginationClickable: true,
spaceBetween: 30
}
}
}
8.router 报错解决：
==》 router is not defined
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
网友评论