vue全家桶(一) 使用 vue-cli 构建项目

7 篇文章 0 订阅

一.安装node.js

  • 进入node.js官网 https://nodejs.org/en/download/ ,选择对应安装包,版本建议8.0以上。

  • node.js安装完了,npm也就安装完了。

  • 键盘按下【win+R】键,输入cmd,然后回车,打开cmd窗口,输入node -v 和 npm -v分别查看对应的版本号,如图所示,显示出对应的版本号后就表示已经下载安装完成。

    cmd窗口

二.安装vue-cli

全局安装 vue-cli:

npm install -g vue-cli

最新的 vue 项目模板中,都带有 webpack 插件,所以这里可以不安装 webpack。
然后再命令行工具中使用 vue -V (注意 V 大写)查看是否安装成功。
vue -V

三.用 vue-cli 来构建项目
1.在本地创建一个文件夹作为项目的存放地,在命令行中进入到项目目录:

vue init webpack vue-project

其中 webpack 是模板名称,vue-project 是自定义的项目名称。

2.模板下载完了后,进入以下界面:
在这里插入图片描述
3.配置完成后,进入项目目录,安装依赖

npm install

4.启动项目

npm run dev

如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config>index.js
在这里插入图片描述
打开http://localhost:8081 就能看到欢迎页面。
5.打包

npm run build

打包完成后,会生成 dist 目录,项目上线时,把dist 目录下的文件放到服务器就可以了。

四.写在后面
vue-cli 是自带开发环境和生产环境的,但是我们上线前一般都是先上测试环境的,下一篇就整理一下vue-cli加入测试环境吧。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值