1 、安装Node.js
参看 node.js环境安装
http://www.cnblogs.com/richerdyoung/p/7265786.html
2 、vue 安装 - NPM方法
因为NPM安装很慢,使用淘宝镜像更方便。淘宝 NPM 镜像是一个完整 npmjs.org 镜像,可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用淘宝镜像来安装模块了。
npm 版本需要大于 3.0,如果低于此版本需要升级它:
# 查看版本
$ npm -v
2.3.0
#升级 npm
cnpm install npm -g
# 升级或安装 cnpm
npm install cnpm -g
在用 Vue.js 构建大型应用时推荐使用 NPM 安装:
# 最新稳定版
$ cnpm install vue
如果出现:Unexpected end of JSON input while parsing near *** 等错误执行:npm cache clean --force(清除缓存)
3、安装全局vue-cli脚手架,用于帮助搭建所需的模板框架
sudo cnpm install -g vue-cli
输入:vue,回车,若出现vue信息说明表示成功
4、切换到你的项目目录
cd /Users/*****/work/project/ --项目路径
5 新建vue项目
vue init webpack vuetest --项目名称
一路回车(第4步ESLint 可以一路n,大师请忽略n)
6、进入新建项目
cd vuetest
cnpm install
7、安装 vue 路由模块vue-router和网络请求模块vue-resource、axios、Vue-axios
cnpm install vue-router
cnpm install axios
vue-resource与axios及vue-axios的区别以及适用性(挖坑待填)
8、启动项目
npm run dev
npm run dev 命令会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
!!!!!!!!关闭项目之后再次启动项目!!!!!!
cd + 项目路径
cnpm install
cnpm run dev
已经存在node_modules 的打开项目在项目的根目录下
npm run dev
关闭用:ctrl+c
目录结构
目录结构和说明留待以后(挖坑待填)
9、打包发布,使用生产环境配置构建项目,构建好的文件会输出到 "dist" 目录。
在配置文件里找到config里面找到index.js,打开后修改build里面 assetsPublicPath 的值,改 “/” 为 “./”,如果不修改的话,打包之后 ,路径是错误的。
cd到项目目录下,用命令行执行
npm run build
运行完成后就可以看到项目的根目录下面多了一个 “dist” 目录,将其托管到一个 web服务中,比如 iis, apache, nginx等等,即可以正常浏览了。
—————— 至此VUE的环境塔建完成并可发布浏览 ——————