普歌-码上鸿鹄团队-Vue的环境搭建、项目创建及项目运行

参考: vue.js.

1.搭建Vue环境

Vue运行环境的搭建需要具备的东西：

• node.js环境：npm包管理器
• cnpm：npm的淘宝镜像
• vue-cli：脚手架构建工具

node.js的安装

note：npm包管理器是集成在node中的，安装了node也就有了npm，输入npm -v命令，会显示npm的版本信息。

cnpm的安装

在命令行中输入npm install -g cnpm –registry=http://registry.npm.taobao.org ,等待其安装完毕。没有报错则表明安装成功

vue-cli的安装

在命令行输入npm install -g vue-cli，等待安装完成。

安装完毕后在命令行输入vue --version，会显示安装的版本号，安装成功。

快速创建一个基于webpack的项目框架

• d:回车 //进入D盘
• cd work回车 //进入D盘的test文件夹
• D:\work\vue init webpack my-vue //创建一个基于"webpack"的项目，后面是项目名（my-vue）
• 依次按照提示输入，项目名、项目描述、项目作者等等，然后一路回车 看到 这句Project initialization finished!项目就创建好了。
• To get started: 就是告诉你接下来该做什么，依次完成下面3行命令就可以了。进入my-vue项目-----安装npm依赖-----运行项目
  

运行一个已经存在的项目

（1）导入项目：可以是本地已经存在的项目或者在GitHub上下载你需要的相关项目，存放在本地（建议不要放到c盘）；

（2）在控制台上输入相关命令，进入到项目所在的文件夹，然后在控制台输入npm install命令添加包依赖（note：当然我们安装了cnpm，这里的npm都可以用cnpm代替） ；
注意:使用npm install -d 可以自动配置package.json，并安装所有需要依赖的包。


（3）运行项目：在控制台输入npm run dev命令，会在浏览器上自动运行该项目。


参考: Element