0、装node（npm）和git

1
安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如果出现相应的版本号，则说明安装成功。

1、淘宝代理

1
npm config set registry https://registry.npm.taobao.org

2、全局安装webpack

1
npm install webpack -g

安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。

3、全局安装 vue-cli

1
npm install --global vue-cli

安装完成之后输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。

4、初始化项目

1
vue init webpack jwlPro

5、 安装依赖

1
npm install

6、运行

1
npm run dev

7、如果报错

1
npm i prettier@~1.12.0

8、打包

1
2
> config index 下   assetsPublicPath: './',
> npm run build

9、安装vue-router

1
在项目下 npm install vue-router

  • 在src下建router目录，建index.js文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    import Vue from "vue";
    import Router from "vue-router";

    const index = () => import("../components/index.vue");
    const blog = () => import("../components/blog.vue");

    Vue.use(Router);

    export default new Router({
      routes: [
        {
          path: '/',
          redirect: '/index'
        },
        {
          path: '/index',
          name: 'index',
          component: index
        },
        {
          path: '/blog',
          name: 'blog',
          component: blog
        }
      ]
    });

  • 在mian.js将路由引入

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    import App from './App.vue';
    import Vue from 'vue';
    import router from './router/index.js'

    //全局事件总线 
    window.EventBus = new Vue();
    Vue.config.productionTip = false

    new Vue({
      el: '#app',
      router, ////////////////////在这里
      render: h => h(App)
    })

  • 在app.vue文件显示路由

    1
    2
    3
    4
    5
    6
    7
    <template>
      <div id="app">
        <p> <router-link to="/blog">Go to blog</router-link></p>
        <p> <router-link to="/index">Go to index</router-link></p>
        <router-view></router-view>
      </div>
    </template>

10、安装axios

  • 安装

    1
    在项目下 npm install axios

  • 使用。在src下建api文件夹，建index.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import axios from 'axios'
    var ServerIp = 'http://118.126.116.187:3002/'

    export const searchBlogTitle = (param) => {
        return axios.get(`${ServerIp}api/searchBlogTitle`);
    }

    export const searchBlogTitleByKey = (param) => {
        return axios.get(`${ServerIp}api/searchBlogByTitle/${param}/`);
    }

  • 使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <script>
    import { searchBlogByT, searchBlogTitleByKey } from "../api/api.js";
    export default {
       methods:{
           init(){
               searchBlogByT(this.value).then(res => {
                  _this.blogList = res.data.data;
               });
           }
       }
    };
    </script>

11、安装element-ui

  • 安装

    1
    在项目下 npm i element-ui -S

  • 使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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);

    new Vue({
      el: '#app',
      render: h => h(App)
    });