【vue】学习笔记-Mac下vue 开发环境搭建

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的环境塔建完成并可发布浏览  —————— 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。