Vue 脚手架安装步骤 及插件使用

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)