组件化开发vue入门

0、装node（npm）和git

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

1、淘宝代理

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

2、全局安装webpack

npm install webpack -g

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

3、全局安装 vue-cli

npm install --global vue-cli

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

4、初始化项目

vue init webpack jwlPro

5、 安装依赖

 npm install

6、运行

 npm run dev

7、如果报错

npm i prettier@~1.12.0

8、打包

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

9、安装vue-router

在项目下 npm install vue-router

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

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将路由引入

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文件显示路由

<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

• 安装

在项目下 npm install axios

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

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}/`);
}

• 使用

<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

• 安装

在项目下 npm i element-ui -S

• 使用

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)
});