背景：
使用vue的目的是因为组件化方便。然之前使用 html/css/js + beego 也能实现（beego做服务，js处理逻辑与数据展示），但是这个工作量较大，对于后期维护也不方便。
1 引入外部 css， js
如果css，js文件是http形式的，可以之间在组中进行引入，比如：
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>由于自己的文件是在本地，在组件 Example.vue 使用方式：
<style>
@import "../../static/style/common.css";
</style>2 嵌套组件（引入组件）
有两种方式： 全局组件，局部组件（参考 https://www.cnblogs.com/jin-zhe/p/8317372.html）。自己使用的是局部组件：
在 components 下新建路径 sub，创建组件 Header.vue
在 components 下的 Home.vue 组件中引用 Header 组件的方式：
<script>
import Header from '@/components/subcomponents/Header'
export default {
name: 'Home',
components: {Header}
}
</script>3 axios 对 data中的定义的数据的修改
<script>
import Header from '@/components/subcomponents/Header'
import axios from 'axios'
export default {
name: 'Home',
components: {Header},
data () {
return {
pg: 0
}
}
}
</script>
如以上定义的 pgm
一般情况下，在定义的函数中，如果要对pg的值进行修改， 只需要进行类似的赋值即可 this.pg = 100。
但是在axios then函数中，this是无效的，此时的解决方式是，将this赋值给 then 中局部变量：
created () {
var self = this
axios.get('http://example/api/', {
params: {
'pg': 10
}
})
.then(function (resp) {
self.pg = 100
})
.catch(function (err) {
console.log(err)
})
}经过created 后， data中的 pg的值就是 100.
4 通过局域网ip访问设置
默认情况下，通过npm run dev 启动 服务后， 在浏览器中通过 http://127.0.0.1:8080 或者 http://localhost:8080 进行访问， 加入个人电脑ip 是 10.168.100.31。这时候是不能通过 http://10.168.100.31:8080 进行访问。
找到 conf/index.js 中的 module.export， 将 dev 下的 host 从 ‘localhost’ 改为 ‘0.0.0.0’ 。 然后重启服务 npm run dev.。 即可通过ip访问
host: '0.0.0.0', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined5 css, js 应用路径改为 绝对路径
正常vue，打包后的文件中的css，js引用路径是相对的路径。比如， 像 1 中， 样式文件放在 static下的 style/common.css 。 打包后的样式文件引入路劲为
<link href=./static/css/app.434033613cf67010641e82714276cca4.css rel=stylesheet>由于个人在router设置时，访问路径是多级，如 index.js 中
{
path: '/article/detail/:numid',
name: 'ArticleDetail',
component: ArticleDetail
}导致打开改页面时 http://example.com/article/detail/88，无法正确引用样式文件,查看网页源码，相对路径是
<link href=./static/css/app.434033613cf67010641e82714276cca4.css rel=stylesheet>，点击 样式文件的链接，发现浏览器中显示的 绝对路径是
http://example.com/article/detail/static/css/app.434033613cf67010641e82714276cca4.css这是错误的路径，正确的路径 应该是
http://example.com/article/static/css/app.434033613cf67010641e82714276cca4.css也就是说我需要使用绝对引用路径，而不是相对路径。
解决方法：
在 build/webpack.base.conf.js 中的 resolve 下添加 'static':path.resolve(__dirname, '../static'),
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'static':path.resolve(__dirname, '../static'),
}
}打包后的源码中，引入的样式文件是绝对路径。
6 history模式
去掉url中的 #
在 index.js 中 new Router 添加 mode: 'history'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
}
]
})7 在nginx上部署
打包
npm run build生成dist文件
拷贝到服务器上， 比如 /home/data/front/dist
nginx配置
listen 80;
server_name example.com ;
location / {
include /usr/local/nginx/conf/mime.types;
root /home/data/front/dist;
index index.html;
try_files $uri $uri/ @router;
}
location @router {
rewrite ^.*$ /index.html last;
}重启nginx 服务 /usr/local/nginx/sbin/nginx -s reload，就可以 通过 example.com 进行访问了。
但是浏览器返回500 服务器错误。
这是因为 dist 路径不在nginx 访问权限内（默认的nobody，没有访问目录权限）。所以可以在nginx开头添加 用户权限。
比如：
user root可以访问服务器上的所有文件，或者 对 dist 具有访问权限的用户都可以（把root换成对应的用户名）。
然后重启nginx。