vue项目启动命令_创建第一个 Vue 项目
本文来源于「Vue 虚拟实验室」yghen 的分享,由素燕进行修改。Vue 官方提供了 Vue-CLI 工具来创建项目,这一节内容我们主要学习 它能干什么,以及在 「Vue 虚拟实验室」中是如何被使用的。Vue-CLI(command-line interface)是创建 Vue 项目的一个官方命令工具,帮助开发者快速创建一个应用。在开发 Lovue 这个项目的时候,就是通过这个工具...
本文来源于 「Vue 虚拟实验室」yghen 的分享,由素燕进行修改。
Vue 官方提供了 Vue-CLI 工具来创建项目,这一节内容我们主要学习 它能干什么,以及在 「Vue 虚拟实验室」中是如何被使用的。
Vue-CLI (command-line interface)是创建 Vue 项目的一个官方命令工具,帮助开发者快速创建一个应用。在开发 Lovue 这个项目的时候,就是通过这个工具创建的。在使用之前,需要通过命令安装:
npm install -g @vue/cli
npm 有时候比较慢,可以通过 cnpm 来安装。
安装完 Vue-CLI 工具后,可以通过两种方式创建项目:
1、命令
通过 vue create ivue 来创建一个项目,项目名称为 ivue,可以直接选择默认的配置,也可以自己手动选择项目中需要用到的特性:
Vue CLI v4.2.3? Please pick a preset: (Use arrow keys)❯ default (babel, eslint) Manually select features
我们直接选择默认的创建方式。创建完成后,执行命令:
$ cd ivue $ npm run serve
直接在浏览器输入下面的地址,即可看到一个默认的页面:
http://192.168.8.210:8080/
2、UI
可以通过 vue ui 来打开一个图形界面来创建项目。
Lovue 这个项目就是通过 Vue-CLI 创建的,那么如何才能在本地运行这个项目呢?
「Vue 虚拟实验成员」@yghen 成员写了一条 tip:
lovue 是一个通过 vue cli3.0+ 搭建的项目。在跑通这个项目之前,首先需要在本地安装 node 和 npm,已安装的请忽略。
把代码 lovue 拉取下来:
git clone git@github.com:Lovuey/lovue.git
项目结构如下图:
进入 Lovue 项目文件夹下(cd lovue/lovue/),执行 npm install,npm 会根据 package.json 配置文件安装依赖,所有的包都会下载到 node_modules 文件夹。
通过 npm run serve 启动项目服务,这句命令让 npm 去执行package.json 中 serve 命令。如下图:scripts 是配置脚本依赖,分别定义了serve、build、lint 对应的执行脚本。
也可以这样启动,在项目根目录下执行 :
./node_modules/.bin/vue-cli-service serve --open
服务启动后自动开启浏览器,并正常显示页面:
总结
本文主要学习了如何通过 Vue-CLI 创建项目,并跑通 Lovue 项目。关于 Vue-CLI 还有很多有用的工具,大家可以在官网中查看。
推荐阅读:
学习与实践相结合 · Vue 虚拟实验室近况
学习 Vue 从如何贡献代码开始
第六阶段 · 期待已久的 Vue
https://cli.vuejs.org/zh/guide/
更多推荐
所有评论(0)