0、裝node（npm）和git
安裝完成之后魁索，打開命令行工具(win+r融撞，然后輸入cmd)，輸入 node -v粗蔚，如果出現(xiàn)相應(yīng)的版本號(hào)尝偎，則說明安裝成功。
1鹏控、淘寶代理
npm config set registry https://registry.npm.taobao.org
2致扯、全局安裝webpack
npm install webpack -g
安裝完成之后輸入 webpack -v，如下圖当辐，如果出現(xiàn)相應(yīng)的版本號(hào)抖僵，則說明安裝成功。
3缘揪、全局安裝 vue-cli
npm install --global vue-cli
安裝完成之后輸入 vue -V（注意這里是大寫的“V”）耍群，如果出現(xiàn)相應(yīng)的版本號(hào)义桂，則說明安裝成功。
4蹈垢、初始化項(xiàng)目
vue init webpack jwlPro
5慷吊、 安裝依賴
npm install
6、運(yùn)行
npm run dev
7曹抬、如果報(bào)錯(cuò)
npm i prettier@~1.12.0
8溉瓶、打包
> config index 下 assetsPublicPath: './',
> npm run build
9、安裝vue-router
在項(xiàng)目下 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
- 安裝
在項(xiàng)目下 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
- 安裝
在項(xiàng)目下 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)
});
