准备工作
环境依赖：Node.js；vue官方脚手架： vue-cli；
具体怎么安装nodejs和vue-cli的部分就不再具体说明了，查看官方文档按步骤执行即可（安装nodejs会默认安装npm（包管理工具），vue-cli依赖npm来安装，注意这个先后关系）。
背景知识
vue.js 核心框架
webpack 模块化打包工具，使用vue-cli初始化项目的时候，我们选择webpack作为我们的模块打包工具
关于什么是模块化？推荐阅读这两篇文章 JavaScript 模块化入门Ⅰ：理解模块 和 JavaScript 模块化入门Ⅱ：模块打包构建。
开始动手
初始化项目，选择webpack作为打包工具，项目名是my-project，然后按照提示填写一些配置，过程中会让你选择是否使用vue-router(推荐使用);这些配置最终会写到项目的package.json中和安装相应的模块
vue init webpack my-project
复制代码接下来使用自己熟悉的编辑器打开项目，目录结构大致是这样的
build和config目录：webpack打包的相关配置文件
src目录：我们最终编写业务代码的地方
static目录：我也不知道干嘛用的
package.json
package.json是项目最基础的配置文件。可以发现里面的很多内容，例如name，author，description等就是刚才初始化项目时我们填写的值；dependencies和devDependencies是项目依赖的包，运行项目之前需要先执行npm install 来安装项目所依赖的包
npm install复制代码然后我们来重点关注一下scripts
npm 允许在package.json文件里面，使用scripts字段定义脚本命令。其中dev和start都是启动本地开发环境的，lint是做语法校验的，build是打包最终线上代码的
{
"name": "my-project",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "ideagay <[email protected]>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {...},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
复制代码为了统一团队内的代码风格，我们一般会选择一些语法校验插件来实现代码风格的统一。这里我们选择eslint作为我们的代码检查插件。首先我们来改一下eslint（语法校验）的相关配置，打开根目录下的.eslintrc.js，在rules下面加一个结尾分号的配置，强制末尾要加分号，养成好习惯；然后把src下面所有文件里的代码缺少分号的补全，不然编译会不通过；其他风格根据习惯自己配置吧。
"semi": [
2,
"always"
]复制代码运行项目看下效果
打开命令行工具，在当前目录下执行以下命令，一切顺利的话，会自动打开在浏览器上打开localhost:8080
# 默认8080端口
npm run dev
# 也可以指定端口
PORT=8090 npm run dev复制代码添加业务代码
src目录是我们主要编写业务代码的地方，可参考以下目录结构配置
assets js,css,图片等资源目录
components 公共组件目录
router vue-router 配置目录
views 页面组件目录
main.js 程序主入口，一般在这里添加插件，如toast，loading等，可自己编写或者使用第三方，如element ui
App.vue 根组件
main.js
import Vue from 'vue';
import App from './App';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router';
Vue.config.productionTip = false;
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});复制代码路由
往router/index.js里添加首页的配置
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/index';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
}
]
});复制代码网络请求
网络请求可以使用axios，然后根据业务再进行一些封装
assets/js/api/ajax.js
import axios from 'axios';
var qs = require('qs');
var instance = axios.create({
baseURL: 'http://xxx.com/',
timeout: 20000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
const ajax = (url, params) => {
return new Promise((resolve, reject) => {
instance({
url: url,
method: 'post',
data: qs.stringify(params)
}).then(res => {
console.log(res);
if (res.data.success === true) {
resolve(res.data.data);
} else {
throw res;
}
}).catch(err => {
console.error(err);
reject(err);
})
})
};
export default ajax;复制代码import Ajax from '@/assets/js/api/ajax.js';
Ajax(`/tui/search`, {
'key': this.keyword
}).then(res => {
console.log(res);
});
复制代码样式
使用normalize.css重置基础样式，消除不同浏览器间的差异，在根组件App.vue中引入就好了
<script>
import 'normalize.css';
export default {
name: 'App'
}
</script>复制代码现在一般业务所需的框架已经基本搭建完成。收工