Vue-cli使用指南
一、vue-cli介绍:vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli二、vue-cli安装教程安装Node.js首先需要安装node环境,Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展
一、vue-cli介绍:
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli
二、vue-cli安装教程
安装Node.js
首先需要安装node环境,Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用,可以直接到中文官网http://nodejs.cn/下载安装包。
安装完成后,可以在命令提示窗输入 npm -v ,如果能正确的显示版本号,则说明成功!
安装Vue-cli
安装好了 node,我们可以直接全局安装 vue-cli:
npm install -g vue-cli
-g是表示全局安装的指令,若想在特定目录下安装,可用cd命令进入特定目录再输入npm install vue-cli即可。
为了能够快速安装,推荐使用国内淘宝镜像安装。以下为设置cnpm:
npm install -g cnpm –registry=https://registry.npm.taobao.org
如果安装失败,可以使用 npm cache clean 清理缓存,然后再重新安装。后面的安装过程中,如有安装失败的情况,也需要先清理缓存。
同样安装完成后,可用cnpm -v查看是否安装成功。
然后使用 cnpm 安装 vue-cli 和 webpack
cnpm install -g vue-cli
最新的 vue 项目模板中,都带有 webpack 插件,所以这里可以不安装 webpack。
安装完成后,
可以使用 vue -V (注意 V 大写)查看是否安装成功。
三、生成项目
1.首先需要在命令行中使用cd进入到项目目录,然后输入:
vue init webpack Vue-Project
其中 webpack 是模板名称,可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates
Vue-Project 是自定义的项目名称,命令执行之后,会在当前目录生成一个以该名称命名的项目文件夹。
安装参数:1.Project name:
2.Project description:
3.Author:
配置完成后,可以看到目录下多出了一个项目文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目
2.然后进入项目目录(cd Vue-Project),使用 cnpm 安装依赖
cnpm install (注意,使用镜像cnpm可能会缺失一些依赖库)
3.安装 vue 路由模块 vue-router 和网络请求模块 vue-resource,输入:cnpm install vue-router vue-resource –save。
4.依赖库在项目目录下的node_modules文件下 ,下面介绍一下vue-cli项目下的各种文件的用途:
5.启动项目,输入:npm run dev。服务启动成功后浏览器会默认打开一个“欢迎页面”,注意:这里是默认服务启动的是本地的8080端口,所以请确保你的8080端口不被别的程序所占用。
6.如果无法正常启动服务,浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config>index.js,建议将端口号改为不常用的端口(port)。另外我还将 build 的路径(assetsPublicPath)前缀修改为 ‘ ./ ‘(原本为 ‘ / ‘),是因为打包之后,外部引入 js 和 css 文件时,如果路径以 ‘ / ‘ 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。
四、打包上线
自己的项目文件都需要放到 src 文件夹下
项目开发完成之后,可以输入 npm run build 来进行打包工作
npm run build
五、参考资料
WiseWrong博客,Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目,http://blog.csdn.net/wisewrong/article/details/55212684
水车博客,vue-cli构建vue项目,http://www.cnblogs.com/xuange306/p/6092225.html
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)