如何运行一个Vue项目
一开始刚接手项目内的vue.js,或者在GitHub上找到vue.js的开源项目,会发现不知如何运行这个项目。通过查阅网上教程,成功搭建好项目环境,同时对前段工程化有了朦朦胧胧的认知,因此将环境搭建过程分享给大家。
1. 环境安装
首先,列出来我们需要的东西:
node.js环境(npm包管理器)
vue-cli 脚手架构建工具
cnpm npm的淘宝镜像
安装node.js
从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。
安装完成之后,打开命令行工具,输入 node -v
,如下图,如果出现相应的版本号,则说明安装成功。
npm包管理器直接集成在node中的,所以,不需要额外安装,输入 npm -v
就会如下图所示,显示出npm的版本信息。
由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候非常慢,甚至会失败,所有我还需要npm的国内镜像—-cnpm。
安装cnpm
在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org
,然后等待,安装完成。
安装webpack(可选)
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
npm install webpack -g
安装vue-cli脚手架构建工具
在命令行中运行命令 cnpm install -g vue-cli
,然后等待安装完成。(这里使用cnpm来替代npm,以加快速度)
2. 运行项目
从项目的根目录打开cmd
进入项目之后安装依赖
npm install
安装项目依赖
安装完成之后项目里面多了一个文件夹
然后运行npm run dev
复制地址到浏览器就可以打开了。