如何启动 vue.js 项目? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
首先, 列出来我们需要的东西:
node.JS 环境 (NPM 包管理器)
vue-cli 脚手架构建工具
cnpm NPM 的淘宝镜像
安装 node.JS
从 node.JS 官网下载并安装 node, 安装过程很简单, 一路 "下一步" 就可以了 (傻瓜式安装).
安装完成之后, 打开命令行工具, 输入 node -v, 如下图, 如果出现相应的版本号, 则说明安装成功.
NPM 包管理器, 是集成在 node 中的, 所以, 直接输入 NPM -v 就会如下图所示, 显示出 NPM 的版本信息.
OK!node 环境已经安装完成, NPM 包管理器也有了. 由于有些 NPM 有些资源被屏蔽或者是国外资源的原因, 经常会导致用 NPM 安装依赖包的时候失败, 所有我还需要 NPM 的国内镜像 ---cnpm.
安装 cnpm
在命令行中输入 NPM install -g cnpm --registry=http://registry.npm.taobao.org 然后等待, 安装完成如下图.
完成之后, 我们就可以用 cnpm 代替 NPM 来安装依赖包了. 如果想进一步了解 cnpm 的, 查看淘宝 NPM 镜像官网.
安装 vue-cli 脚手架构建工具
在命令行中运行命令 cnpm install -g vue-cli , 然后等待安装完成.(注意, 这里使用 cnpm 来替代 NPM, 不然速度超级慢, 会导致卡在那)
通过以上三部, 我们需要准备的环境和工具都准备好了, 接下来就开始使用 vue-cli 来构建项目.
用 vue-cli 构建项目
要创建项目, 首先我们要选定目录, 然后再命令行中把目录转到选定的目录. 在这里, 我选择桌面来存放新建的项目, 则我们需要先把目录 cd 到桌面, 如下图.
在桌面目录下, 在命令行中运行命令 vue init webpack firstVue . 解释一下这个命令, 这个命令的意思是初始化一个项目, 其中 webpack 是构建工具, 也就是整个项目是基于 webpack 的. 其中 firstVue 是整个项目文件夹的名称, 这个文件夹会自动生成在你指定的目录中 (我的实例中, 会在桌面生成该文件夹), 如下图.
运行初始化命令的时候回让用户输入几个基本的选项, 如项目名称, 描述, 作者等信息, 如果不想填直接回车默认就好.
打开 firstVue 文件夹, 项目文件如下所示.
这就是整个项目的目录结构, 其中, 我们主要在 src 目录中做修改. 这个项目现在还只是一个结构框架, 整个项目需要的依赖资源都还没有安装, 如下图.
安装项目所需的依赖
要安装依赖包, 首先 cd 到项目文件夹 (firstVue 文件夹), 然后运行命令 cnpm install , 等待安装.
安装完成之后, 会在我们的项目目录 firstVue 文件夹中多出一个 node_modules 文件夹, 这里边就是我们项目需要的依赖包资源.
安装完依赖包之后, 就可以运行整个项目了.
运行项目
在项目目录中, 运行命令 NPM run dev , 会用热加载的方式运行我们的应用, 热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果.
这里简单介绍下 NPM run dev 命令, 其中的 "run" 对应的是 package.JSON 文件中, scripts 字段中的 dev, 也就是 node build/dev-server.JS 命令的一个快捷方式.
项目运行成功后, 浏览器会自动打开 localhost:8080(如果浏览器没有自动打开, 可以手动输入). 运行成功后, 会看到如下所示的界面.
更多 Web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17225.html