准备工作:
电脑要安装 node.JS 及 NPM
安装淘宝镜像, 听说用淘宝镜像安装速度会快过一点
NPM install cnpm -g --registry=https://registry.npm.taobao.org
全局安装 vue-cli
NPM install --global vue-cli
查看 vue 是否安装成功, 注意参数是大 V
vue -V
构建项目
构建项目过程图片
构建命令: vue init webpack 项目名
Project name 输入项目名称
Project description 输入项目描述
Author 作者
Vue build 打包方式, 回车就好了?
Install vue-router? 选择 Y 使用 vue-router, 输入 N 不使用?
Use ESLint to lint your code? 代码规范, 避免不必要的麻烦推荐 N
Setup unit tests with Karma + Mocha 单元测试
Setup e2e tests with Nightwatch? E2E 测试
安装依赖
构建项目成功之后, 进入刚才创建的项目目录
安装依赖命令: cnpm install 或者 NPM install
运行项目
运行命令: NPM run dev
然后访问: http://localhost:8080, 出现如下图片说明成功
运行 vue 后显示的 hello world 界面
打包部署
编译打包的图片
打包命令: NPM run build
成功之后会在项目路径生成名为 dist 的文件夹
把 dist 复制到 nginx 的 html 目录下, 启动 nginx 即可
可能出现的问题就是你访问的时候会出现一个空白的页面, 那是因为样式没有找到报 404
解决方案:
修改项目路径下的 conf/index.JS 文件
修改
module.exports={dev:{},build:{}}
中的 build 把 assetsPublicPath 属性从'/' 改为 './'然后重新打包即可
注意上面的步骤, 是修改 build 中的 assetsPublicPath, 不是 dev 中的, 别改错了地方
自此你已踏入 vue 的大门, 开始 Vue 的探索之旅吧.
来源: http://www.jianshu.com/p/0b963870961d