闲聊一会儿 >_< 这篇文章只是刚刚打开vue的大门,放轻松~~
安装node环境
先检测下node版本吧!或许你还没有安装node呢~
(如果使用Mac在安装的时候报错,除了网络原因就是权限问题,你要在安装的指令前加上sudo)
在终端输入指令
$ node -v
如果你看不到版本号的话,那就劳烦去官网安装一个吧。
当然,如果你安装了node,自然就会有npm工具了。
官网地址:https://nodejs.org/en/download/
安装vue-cli脚手架工具
接下来,我们就可以先全局安装vue-cli~
在终端输入指令
$ npm install -g vue-cli
=======......如果等的实在是太漫长了,那就Ctrl+c结束这段漫长的等待,使用国内的淘宝镜像cnpm
在终端输入指令
npm install -g cnpm –registry=[https://registry.npm.taobao.org]
安装完成后可以输入cnpm -v去检测,如果返回版本号,说明安装成功。只要把npm换成cnpm的写法就可以愉快的使用淘宝镜像去安装你需要的东西了。
最后,检测一下我们是否安装成功了vue-cli
在终端输入指令
$ vue - V
注意是大写的V,大写的~
看到版本号了,说明安装成功了。
初始化项目
首先,cd到自己想要创建新项目的文件夹下
< vue init 模板类型 项目名称 > 以这样的格式
其中,模板类型有:
browserify -- 全功能的Browserify + vueify,包括热加载,静态检测,单元测试
browserify-simple -- 一个简易的Browserify + vueify,以便于快速开始。
webpack -- 全功能的Webpack + vueify,包括热加载,静态检测,单元测试
webpack-simple -- 一个简易的Webpack + vueify,以便于快速开始。
(根据项目需求来选择模板类型,我这里就选择最全面的webpack模板吧!)
在终端输入指令
$ vue init webpack item
item是我自己取的项目名称
然后,就会让你填写一些项目的信息(不知道选什么就一路回车就对了,哈哈~对了,填写项目名称要小写字母哦!)
我的正在初始化,可是好慢,也许是网速的原因吧~
报错了!!应该是忘了给权限~
再次在终端输入指令
$ sudo vue init webpack item
噢耶!终于初始化成功了!
接着,cd进入到创建的目录
按照我标注的红色框框去一步步做~
第一,进入到创建的目录
第二,输入指令 npm install ,因为自动构建过程中已存在package.json文件,所以这里直接安装依赖就行。(安装 vue 路由模块 vue-router 和网络请求模块 vue-resource,输入:cnpm install vue-router vue-resource --save)。
第三,启动项目,输入指令 npm run dev
第四,复制http://localhost:8080这个链接,浏览器会默认打开一个“欢迎页面”。