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)