运行Vue项目

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

安装node.js

node.js官网 下载安装node 一路“下一步”

  1. 安装完成之后打开cmd 输入 node -v 查看相应的版本号

  2. npm包管理器,是集成在node中的,直接输入 npm -v 显示npm版本号

node环境安装完成,npm包管理器也有了,由于有些npm资源被屏蔽或国外资源的原因,经常导致npm安装依赖包失败,所以要npm的国内镜像 cnpm

安装cnpm

cmd 中输入 npm install -g cnpm --registry="http://registry.npm.taobao.org"

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

cmd 输入 cnpm install -g vue-cli

用vue-cli构建项目

要创建项目,首选选定目录,然后在命令行中吧目录转到选定的目录,在选定目录下运行 vue init webpack firstVue 这个命令的意思是初始化一下这个项目,其中webpack是构建工具,也就是整个项目是基于webpack的,其中firstVue是整个项目的文件夹名称,这个文件夹会自动生成在你指定的目录中

安装项目所需要的的依赖

cd到项目文件夹下,然后运行命令 cnpm install 等待安装

安装完成之后项目目录下会多出一个node_modules文件夹,这就是项目需要的依赖包

运行项目

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

npm run dev命令:run对象的是package.json文件中,scripts字段中的dev 也就是node build/dev-server.js命令的一个快捷键方式

npm run serve

npm run build

npm run lint

项目运行成功之后,浏览器会自动打开localhost:8080 如果浏览器没有自动打开,可以手动输入

posted @ 2021-02-22 13:28  zrx001  阅读(287)  评论(0)    收藏  举报