vue入门——1环境搭建及项目构建启动

一、vue.js开发环境搭建：

      1、安装Node.js。NodeJs的包管理器npm。npm集成了最多的前端插件，配置命令或者命令行即会下载对应开源插件、项目。npm集成在了Node.js中，所以安装Node.js的时候便安装了。

      2、由于资源限制，安装npm依赖包的时候经常失败。建议使用npm的国内镜像cnpm命令行工具代替默认的npm。

npm国内镜像https://npm.taobao.org/

在命令行中输入以下内容等待安装更换npm镜像地址。

npm install -g cnpm --registry=https://registry.npm.taobao.org

      3、安装Vue-cli脚手架，官方脚手架。

在命令行输入以下内容等待安装：

cnpm install -g vue-cli

二、构建Vue项目

1、安装好Vue环境后即可进行Vue项目开发：

在此目录下创建一个基于webpack模板的新项目，即在cmd中输入以下命令：

vue init webpack testVue

该项目testVue基于webpack打包和压缩。

输入命令后，在此过程中还需要逐步输入项目名称、描述、作者等，不填就是括号中默认的。

那些选项可选No。（上图项目构建成功后有后续命令提示。）

 

安装项目依赖文件

安装之后：目录里是项目的依赖文件。

 

三、运行项目

使用命令npm run dev 运行项目。命令执行后会跳到npm黑窗口，里面有项目访问路径。

 

此时项目构建成功。之后的开发在src目录下进行开发。在命令行窗口按Ctrl+C便能停止项目。