详情请参考vue官网
需安装git,node,cnpm,vue等环境。
1.安装git
从git官网中下载安装包,并安装,一直点next即可。
2.安装node
从node官网中下载安装包,并安装,一直点next即可。
安装完毕,可在命令行工具中输入node -v,查看node的版本号,我们下面要用的npm已经在node的集成包里了,所以直接输入npm -v即可看到npm的版本号。
恭喜你,node已经安装成功。
3.安装cnpm
使用淘宝镜像,在系统中安装cnpm,命令行为
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后,输入cnpm-v,查看版本号,恭喜你,cnpm安装成功。
使用cnpm的原因是可以避免需要翻墙,更快速、稳定。
4.安装vue-cli
cnpm install -g vue-cli
(-g 全局安装vue)
5.使用webpack打包
使用webpack打包方式打包,命令行为
vue init webpack helloworld
helloworld为文件名,请勿使用大写字母
会出现一些问题供自行选择,例如确认名字, 作者,描述等。
问题如下:
Project name (my-project) # 项目名称(helloworld)
Project description (A Vue.js project) # 项目描述一个Vue.js 项目
Author 作者(你的名字)
Install vue-router? (Y/n) # 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码? (Y [ yes ] / N [ no ])
Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint(使用箭头键)
Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha? (Y/ N)
Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试,Nightwatch? (Y/ N)
然后去到所选的目录下方会出现一个hellworld的文件夹,恭喜你,已经创建项目成功。
6.安装依赖
项目创建成功后,得安装依赖来运行项目;
先进入你的目录中,
cnpm install
因为package.json中已经配置好了所有的依赖了,直接安装即可。
安装完毕后,会在目录中出现node_modules文件,恭喜你,依赖已经安装成功。
7.运行项目
cnpm run dev
运行完成后,你将获得一个地址为:http://localhost:8080,,将此地址在浏览器中打开,恭喜你,你的项目已经运行成功。要持续打怪哦。加油!!!