什么是 vue-cli
vue-cli 是 vue.js 的脚手架，用它可创建一套vue模板，可快速构建一个vue项目进而快速开发。
准备工作：
安装node，如果已经安装，此步可跳过。
没办法翻墙用谷歌的道友还是直接百度吧，关键词搜node，进入它的官网，英文或中文版官网都行，可以在首页直接点击下载，也可以去下载页根据你的系统版本选择node的版本去下载。如果以前没玩过node或者npm，建议直接下载最新的版本，因为后续有很多用npm安装的插件对npm及node的版本有要求。
下载完之后进行安装，新手的话我建议你直接用它默认的安装路径和配置，一般是在C盘，也不会占用你C盘多少内存，后续还能避免很多麻烦。
怎么安装，直接百度咯，这里咱们直接跳过，node里面包含了npm，所以node安装成功了就代表npm也存在了，可以快捷键 Ctrl+R ，输入cmd 打开命令行工具检测他们的版本 npm -v ，有版本号显示则表示安装成功。
来吧开始创建项目
如果没有安装webpack ，先安装webpack ，vue是基于webpack创建项目的。
npm install vue-cli -g //安装vue-cli 脚手架
vue init webpack 项目名 //创建项目
cd 项目名 //进入项目根目录
npm run dev //启动项目
项目结构是这样的：
项目文件介绍：
新手开发的话，build文件夹里的东西不用动。
config文件夹后期会用上，
node_modules是项目安装的各种插件依赖，
src 是你写代码的位置
static 是放静态文件的，比如css、img、iconfont字体文件啥的
.babelrc 是配置babel的
.editorconfig 是配置编辑器的
.eslintignore 是配置eslint规则下需要忽视的股则项
.eslintrc.js 是配置eslint规则的
.gitignore 是配置git 的忽略项
.postcssrc.js 目前不知道干啥的
index.html 主页
new Vue({
el: '#app', //el 挂载的dom所在地，这个app就是
router,
components: { App },
template: '<App/>'
});
main.js 内容如下：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import FastClick from 'fastclick'
Vue.config.productionTip = false
axios.defaults.withCredentials=true
Vue.prototype.$ajax = axios
Vue.prototype.host = 'http://xxx.xxx.com' //接口base地址
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
/**
* 点击延迟
*/
FastClick.attach(document.body)
App.vue 的内容是这样的
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
body {
margin: 0;
padding: 0;
}
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
如果开发的是手机端项目，需要去 index.html 文件里补上 meta 的其他配置项：
开发之前问一下运维，如果项目不能放服务器的根目录下，只能放在服务器的一个子目录里（因为服务器根目录下有项目，而导致不能放咱们的项目的情况），那么代码里引用 static 文件夹里的静态资源的路径就不能直接这样用：
<template>
<div>
<img src='../../static/img/xxx.png' title=''>
</div>
</template>
因为图片出不来，会找不到路径。
而要用require来引入再使用：
<template>
<div>
<img :src='defaultLogo' title=''>
</div>
</template>
<script>
export default{
data(){
return {
defaultLogo:require('../../static/img/xxx.png')
}
},
}
<script>
注意：如果项目的图片等静态资源放在了 src/assets 下，那么可以直接使用相对路径写 <img src='../../static/img/xxx.png' title=''> ，图片是可以出来的，就不用 require 了。
给vue单页面应用的每个页面设置title
router文件夹下的两个js文件的内容，分别如下：
index.js的：
import Vue from "vue";
import VueRouter from "vue-router";
import routesList from "./router";
Vue.use(VueRouter);
const router = new VueRouter({
mode: "history",
base:'/connection/',
routes: routesList.routes
});
//Vue单页应用，使用vue-router设置每个页面的title
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next();
});
export default router;
router.js的
const Home = r =>
require.ensure([], () => r(require('../page/home/home.vue')), 'home');
const JoinUs = r =>
require.ensure([], () => r(require('../page/joinUs/joinUs.vue')), 'joinUs');
const routesList = {
routes: [
{
path: '/',
name: 'Home',
component: Home,
meta: {
keepAlive: true,
title: '哒哒哒哒哒' //配合router文件夹里的index.js文件配置每个页面的title
}
},
{
path: '/Home',
name: 'Home',
component: Home,
meta: {
title: '首页' //配合router文件夹里的index.js文件配置每个页面的title
}
},
{
path: '/JoinUs',
name: 'JoinUs',
component: JoinUs,
meta: {
title: '加入我们'
}
}
]
};
export default routesList;
想用自己手机进行本地调试？
可以，打开 config/index.js 文件，可以看到 module.exports 导出的对象里有两个属性：dev 和 build ，dev是配置开发环境的相关配置，build是配置生产环境的。
既然是本地调试，那咱们来修改dev这项：
修改圈出来的属性host，之前这里的默认值是 'localhost' ，我在改成了我自己电脑的 ip ，端口不动，然后重新启动 npm run dev ，这时候，控制台就会出现下图：
浏览器上访问，直接按住Ctrl ，点击鼠标左键，即可打开。
手机上访问：复制这个链接，用草料二维码生成一个二维码，用微信等扫码访问。
项目开发的差不多，想放线上玩玩？ 可以，先确定：
项目放服务器哪个位置，是根目录还是子目录 ，然后打开 config/index.js 文件
可以看到：
看到圈出来的这个吧？ 这是默认值，就一个 /
如果，项目放服务器根目录，那么：
修改被圈出这项的值为 ./ ， 即： assetsPublicPath: './'
如果，项目放服务器子目录：
修改被圈出这项的值为 /服务器子目录名字/ ，比如： assetsPublicPath: '/xxx/'
然后，运行打包命令：
npm run build //项目打包命令
运行打包命令之后，会出现一个跟 src 同级的 dist 目录，那是打包之后的项目
把dist 文件夹打包发给运维即可。
vue 单页面应用放服务器上之后，用户去访问页面，第一次打开，正常，刷新一次，就会出现页面404的情况， 解决办法如下：
转载自 Vue 部署单页应用，刷新页面 404/502 报错
在 Vue 项目中，可以选择 hash或者 history.pushState() 实现路由跳转。如果在路由中使用history模式：
export default new Router({
mode: 'history',
base: __dirname,
scrollBehavior,
routes: [index, blog, project, about, list]
})
那么，当我们 npm run build 完成并部署到服务器后，刷新某个路由下的页面，会出现 404 或者 502 错误。
这是因为刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。
解决方法
简单配置下 nginx ，让所有路由（url）下的页面重写到 index.html即可：
server {
listen 80;
server_name www.fayinme.cn;
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_vary off;
gzip_disabled "MSIE [1-6]";
autoindex on;
root /www/blogfront/production/current;
index index.html;
location / {
try_files $uri $uri/ @router;
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
注意
配置完成后，如果刷新任意页面（F5）都跳转到首页，你需要查看下 app.vue 是否包含了如下代码：
created() {
this.$router.push('/')
}
如果有，注释或删除即可。
