vue 中的npm 的一些安装

vue脚手架 vue-cli

            cnpm  install --global  vue-cli 
            创建一个基于 webpack 模板的新项目
            vue init webpack my-project
            里需要进行一些配置，默认回车即可
            cd my-project      //到你的下载那个目录
            cnpm install        //初始化vue
            cnpm run dev     运行vue
            访问    localhost:8080
            出现页面即可
            再次运行的话
            cnpm run dev
           build     //项目构建webpack 代码
           config  // 配置目录，包括端口号等     初学可以使用默认的 
           node_modules    //项目加载依赖模块
           src
           这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
           assets: 放置一些图片，如logo等。
          components: 目录里面放了一个组件文件，可以不用。
          App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用components 目录。
          main.js: 项目的核心文件。
          static     //静态资源目录，如图片、字体等。
          test     //初始测试目录，可删除
         .xxxx文件    //这些是一些配置文件，包括语法配置，git配置等。
          index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
          package.json    项目配置文件。
          README.md   项目的说明文档，markdown 格式

vue脚手架

  是基于webpack2.0搭建的（现在webpack已经有3.0了）
    npm cache clear --force（报错时执行此代码，并且再次执行install）
    cnpm install  vue-cli(加个 -g是全局安装) 
    vue init webpack demo（建立脚手架）
    cnpm install (初始化依赖)
    cnpm run dev 
    cnpm run build(打包生成线上目录)
          npm install --save-dev prettier@1.12.0 再一次开启

包的安装

@（指定版本）

脚手架的两种模式

  hash、history
  <router-link tag=""(指定标签)></router-link>

sass

    cnpm install --save-dev sass-loader
    cnpm install --save-dev node-sass
            或者
            //  命令行输入
             cnpm install node-sass -D
             cnpm install sass-loader -D

            //  在组件中使用
            <style lang="sass" scoped></style>或者<style lang="scss" scoped></style>
           //完成sass

vuex

    cnpm install vuex --save
    spm install module-name -save 自动把模块和版本号添加到dependencies部分
    spm install module-name -save-dve 自动把模块和版本号添加到devdependencies部分
    在src文件下面新建store>index.js
    当然文件名你随便取 但是index.js是必须的 不用index.js也行但是你在main.js中引入的话你就要把他的文件名写上
    在index.js中引入
    import Vue from 'vue'
    import Vuex  from 'vuex'
    Vue.use(Vuex)
    new Vuex.Store({
    state:{
              //定义数据
     }
    })
   在main.js中引入
   // 名字小写
   import store from './store'
   new Vue({
            el: '#app',
            router,
            components: { App },
            store,
            template: '<App/>'
    })
   在子组件中获取数据
computed:{
     //自定义事件名称  函数写法
      tableAll(){
            //获取store > index.js > state 中的数据返回给函数名 
              return this.$store.state.tableArr
          }
     }
 在子组件中操作数据
 methods:{
     //函数名称
     参数
     add(index){
          //通过commit("add",index)传递
         this.$store.commit("add",index);
         //1个参数   自定义事件名字
           //2个参数   你要给store > index.js 传递的参数
           }
     }
      store > index.js 接收子组件中操作数据
            state => 基本数据
    getters => 从基本数据派生的数据 
    mutations => 提交更改数据的方法，同步！ 
    actions => 像一个装饰器，包裹mutations，使之可以异步。 
    modules => 模块化Vuex
      mutations的两种方法
         第一种提交mutation的方式
                 this.$store.commit('方法'{参数})
             第二种提交mutation的方式
                 this.$store.commit({
                      type: '方法',
                    形参: 实参
                })
       mutations:{
            //第一个参数是默认state直接可以操作
           //第二个参数是你在子组件传递过来的数据
      add(state,index){
             state.tableArr[index].num++
             state.tableIs.push(state.tableArr[index]);
        },
      }

Bootstrap，Jquery

    cnpm install jquery --save-dev

命令cnpm install bootstrap --save-dev

     npm install --save popper.js


在src/main.js文件中 引入bootstrap
import './assets/css/bootstrap.css'
import './assets/js/bootstrap.min'

在build/webpack.base.conf.js中添加如下内容：

//引入
var webpack = require('webpack')
//在module.exports = {}最下方
        
plugins: [
    new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
    })
]
//在 main.js 里引入
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
    import $ from 'jquery'


//测试jq在App.vue里
$(function () {
    alert('234')
})
//测试bootstrap在App.vue里
<template>
    <div id="app">
    <router-view/>
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <button class="btn btn-primary">测试按钮</button>
        </div>
      </div>
    </div>
    </div>
</template>

axios

    cnpm install axios
    cnpm install --save axios vue-axios

    import Vue from 'vue'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
     
    Vue.use(VueAxios, axios)
    
    Vue.axios.get(api).then((response) => {
      console.log(response.data)
    })
     
    this.axios.get(api).then((response) => {
      console.log(response.data)
    })
     
    this.$http.get(api).then((response) => {
      console.log(response.data)
    })

amaze UI(妹子UI)

    cnpm install amaze-vue --save
在vue-cli项目下的package.json文件中，"devDependencies"项中添加    "amaze-vue": "（具体的版本号)"("amaze-vue": "^1.1.12",)
在项目的根目录下，执行 npm install （将依赖模块的源代码导入到node_modules中）
在 /src/main.js中添加如下代码
import AmazeVue from 'amaze-vue';  
import 'amaze-vue/dist/amaze-vue.css';  
  
Vue.use(AmazeVue);  

Element ui

npm i element-ui -S
在main.js中引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);