使用CLI工具之前需要用户对Node.js和相关构建工具有一定程序的了解。
CLI是构建一个快速而规范的Vue.js项目的重要工具。为了让读者能够快速地学会使用CLI工具，下面直接使用CLI进行项目的创建。

通过CLI构建应用

1.通过cli工具初始化一个以Webpack为模板、项目名称为demo_view的项目。

Vue init webpack demo_view

2.通过上面步骤生成了项目结构，通过cd命令进入该项目的根目录，然后使用npm install命令安装项目需要的插件。
3.使用npm run dev命令运行项目，浏览器访问

输出 Hello world！

从本节开始我们就一起进入编程之旅了，还是从最经典、最简单的输出Hello World示例程序开始。
目录解析
目录/文件说明
build 项目构建(webpack)相关代码
config 配置目录，包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件。
static 静态资源目录，如图片、字体等。
test 初始测试目录，可删除
.xxxx文件 这些是一些配置文件，包括语法配置，git配置等。
index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档，markdown 格式

开发环境与生产环境

npm run dev
npm run build

通过CLI工具构建一个Vue.js程序相关推荐

【web前端】如何运行第一个vue.js程序，尝试运行官方指导案例
首先我们了解vue.js的官网 https://vuejs.bootcss.com/guide/ 官网上有明确的安装教程: 尝试 Vue.js 最简单的方法是使用 Hello World ...
手把手教你调试构建一个Vue/小程序商城项目源码
下面将详细的介绍weiphp5.0商城项目的调试打包上线的流程: 安装NodeJs/NPM 安装CNPM(可忽略) 运行项目打包上线项目 1. 安装NodeJs 推荐到NodeJS的官网下载安装包 ...
构建你的第一个Vue.js组件
我记得当时我拿起CakePHP,我很喜欢,开始使用它是多么容易.这些文档不仅结构合理,详尽无遗,而且用户友好.多年以后,这正是我在Vue.js中感受到的.然而,与Cake相比,Vue文档仍然缺少一件事 ...
Nest的基本概念，以及如何使用Nest CLI来构建一个简单的Web应用程序
Nest是一个用于构建高效.可扩展的Node.js服务器端应用程序的框架.它是基于Express.js构建的,并且提供了多种新特性和抽象层,可以让开发者更加轻松地构建复杂的应用程序. 本文将介绍Nes ...
如何对第一个Vue.js组件进行单元测试
by Sarah Dayan 通过莎拉·达扬 In Build Your First Vue.js Component we made a star rating component. We've c ...
第一个vue.js项目
写在前面本文主要给刚刚接触前端或者vue.js的同学,旨在可以通过本文能够顺利运行起一个vue工程! 零.环境搭建首先安装node及npm(已经安装过的自动跳过),打开node官网: 不管是win ...
angular1.2.27_Angular 8 + Spring Boot 2.2：立即构建一个CRUD应用程序！
angular1.2.27 "我喜欢编写身份验证和授权代码." 〜从来没有Java开发人员. 厌倦了一次又一次地建立相同的登录屏幕? 尝试使用Okta API进行托管身份验证,授权 ...
Angular 8 + Spring Boot 2.2：立即构建一个CRUD应用程序！
"我喜欢编写身份验证和授权代码." 〜从来没有Java开发人员. 厌倦了一次又一次地建立相同的登录屏幕? 尝试使用Okta API进行托管身份验证,授权和多因素身份验证. 如果您已 ...
vue怎么运行html,怎样运行一个vue.js项目
怎样运行一个vue.js项目? 下载并安装node,安装过程很简单,一路"下一步"就可以了,安装完成之后,打开命令行工具,输入 node -v,如下图,如果出现相应的版本号,则说明 ...

通过CLI工具构建一个Vue.js程序

通过CLI构建应用

输出 Hello world！

开发环境与生产环境

通过CLI工具构建一个Vue.js程序相关推荐

最新文章

热门文章