vue-cli项目常用插件及支持安装

版权声明：无需声明 https://blog.csdn.net/Sun_Shydeo/article/details/88979223

1、检查 node版本

node -v

2、全局安装 vue-cli

npm install -g vue-cli

或使用国内淘宝镜像

npm install -g cnpm –registry=https://registry.npm.taobao.org

cnpm install -g vue-cli

3、使用 webpack搭建

vue init webpack vue-demo

• vue-demo即为项目名称，可自定义

• Install vue-router     Y   安装 vue-router

• 其他全部为   No

4、启动

npm run dev

npm start

5、访问http://localhost:8080

6、打包项目

npm run build

7、Vuex安装

npm install vuex --save

   main.js引入

import Vuex from 'vuex'

   main.js使用Vuex

Vue.use(Vuex)

8、vue-resource安装（不能与axios同用）

 npm install vue-resource --save

   main.js引入

 import VueResource from 'vue-resource'

   main.js使用Vuex

  Vue.use(VueResource)

9、axios安装

   npm install axios

   然后

   npm install --save axios vue-axios

   main.js引入 axios、vue-axios

     import axios from 'axios'

     import VueAxios from 'vue-axios'

   main.js使用axios、vue-axios

     Vue.prototype.axios = axios;

     Vue.use(VueAxios, axios);

10、安装Element-ui

   npm i element-ui -s

   main.js引入Element-ui

     import ElementUI from 'element-ui'

main.js使用ElementUI

     Vue.use(ElementUI);

11、bootstrap + jquery 安装

npm install bootstrap --save-dev

npm install jquery --save-dev 

main.js引入bootstrap、jquery

     import $ from 'jquery'

     /*Bootstrap引入*/

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

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

配置build文件webpack.base.conf.js，添加两行代码： 

const webpack = require('webpack')

module.exports = {

     //省略

     plugins: [

        new webpack.ProvidePlugin({

         $: "jquery",

         jQuery: "jquery",

         "windows.jQuery": "jquery"

         })

      ]

}

20、其他安装

采用当前项目安装(--save-dev)

npm install 插件名称@版本 --save-dev