Vue.js --- vue-cli构建Vue项目(1)

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件Vue 生态系统支持的库开发的复杂单页应用。

搭建环境

  • node.js环境(npm包管理器)
  • vue-cli 脚手架构建工具
  • cnpm npm的淘宝镜像
安装 node.js
  1. node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了

安装完成,检测是否安装成功,如果出现相应的版本号,则说明安装成功。命令:

node -v

npm包管理器,是集成在node中的,直接输入 npm -v 命令显示出npm的版本信息。

npm -v

由于npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有还需要npm的国内镜像—淘宝 NPM 镜像(cnpm)

  1. 安装 cnpm

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

之后,就可以用cnpm代替npm 来安装依赖包了。

安装 vue-cli 脚手架构建工具
  1. 安装 vue-cli

cnpm install -g vue-cli

  1. 用 vue-cli 构建项目
  • Vue 初始化一个项目(firstVue),使用webpack构建工具构建项目,首先切换至工作目录

vue init webpack firstVue

到此,工作目录下会有firstVue整个项目的目录结构

  • 安装项目所需的依赖,要安装依赖包,首先切换至项目文件夹目录,运行如下命令:

cnpm install

安装完成之后,会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹,这里边就是我们项目需要的依赖包资源。

运行项目

在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

npm run dev

命令解释:

其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。

项目运行成功后,浏览器输入localhost:8080 打开项目

打包上线

项目文件需要放到 src 文件夹下,项目开发完成之后,可以输入 npm run build 来进行打包工作

npm run build

打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看;

项目上线时,只需要将 dist 文件夹放到服务器就行了。

猜你喜欢

转载自www.cnblogs.com/hymanking/p/9165590.html