Vue入门教程 第七篇 (vue脚手架与发布)

vue-cli(vue脚手架)

vue-cli,我们也称vue脚手架,是一个全自动生成vue项目的程序,使用它我们可以快速搭建一个基础的vue项目。vue-cli只是为了方便我们开发的工具,并非必须。

npm安装脚手架程序:
 npm install -g vue-cli 

开始初始化项目(项目名称:project-name):
 vue init webpack-simple project-name

生成项目目录:

 1 README.md --项目说明包
 2 package.json -- 存放依赖包
 3 package-lock.json -- package锁文件 确定第三方包的版本
 4 LICENSE -- 开源协议的说明
 5 .postcssrc.js -- postcss的配置文件
 6 .gitignore -- 配置不需要上传的文件
 7 .eslintrc.js -- 配置了一些代码的规范
 8 .eslintignore -- 这里面的配置项不受.eslintrc.js的检测
 9 .editorconfig -- 编辑器的配置项
10 .babelrc -- 语法解析器配置项 将vue转换成浏览器能执行的代码
11 static -- 存放静态资源
12 src -- 整个项目的源代码
13 mian.js --- 整个项目的入口文件
14 App.vue -- 整个项目的根组件
15 router -- 存放整个项目的路由
16 components --- 存放项目用到的小组件
17 assets -- 存在项目的图片
18 config -- 存在项目的配置信息
19 build -- 放的是项目webpack 打包的一些配置信息

发布Vue

1.打包

在vue目录中运行命令(会在dist文件夹内生成打包文件):
 npm run build

2.安装nginx(用来映射ip及域名,相当于IIS)
地址:http://nginx.org/en/download.html

3.在nginx的config中修改对应的IP及端口(作为访问的地址,也可以是域名)
4.将vue包放到config中配置的项目目录(即配置文件中root的值,默认为html文件夹)
5.配置完毕后,启动:start nginx

几个实用的nginx命令

  • 查看nginx的版本号:nginx -v
  • 启动nginx:start nginx
  • 快速停止或关闭nginx:nginx -s stop
  • 正常停止或关闭nginx:nginx -s quit
  • 配置文件nginx.conf修改重装载命令:nginx -s reload

原文地址:https://www.cnblogs.com/JHelius/p/11691003.html

时间: 2024-10-10 16:48:04

Vue入门教程 第七篇 (vue脚手架与发布)的相关文章

Vue入门教程 第三篇 (条件与循环)

v-if语法(条件) 符合条件时显示(渲染)某一元素. 1 <div id="app"> 2 <div v-if="ok"> 3 <h1>title</h1> 4 </div> 5 6 <div v-if="type==1"> 7 <h1>title2</h1> 8 </div> 9 <div v-else-if="type

Systemd 入门教程:实战篇

Systemd 入门教程:实战篇 上一篇文章,介绍了 Systemd 的主要命令,这篇文章主要介绍如何使用 Systemd 来管理我们的服务,以及各项的含义: 一.开机启动 对于那些支持 Systemd 的软件,安装的时候,会自动在/usr/lib/systemd/system目录添加一个配置文件,如果你想让该软件开机启动,就执行下面的命令(以httpd.service为例). $ sudo systemctl enable httpd 上面的命令相当于在/etc/systemd/system目

Docker入门教程(七)Docker API

Docker入门教程(七)Docker API [编者的话]DockerOne组织翻译了Flux7的Docker入门教程,本文是系列入门教程的第七篇,重点介绍了Docker Registry API和Docker Hub API. 纵观我们的Docker系列教程,我们已经讨论了很多重要的Docker组件与命令.在本文中,我们将继续深入学习Docker:剖析Docker APIs. Docker提供了很多的API以便用户使用.这些API包含四个方面: Docker Registry API Doc

【转帖】Systemd 入门教程:命令篇

Systemd 入门教程:命令篇 Copy From http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-commands.html 感觉是一个非常好的入门教程 Systemd 是 Linux 系统工具,用来启动守护进程,已成为大多数发行版的标准配置. 本文介绍它的基本用法,分为上下两篇.今天介绍它的主要命令,下一篇介绍如何用于实战. 一.由来 历史上,Linux 的启动一直采用init进程. 下面的命令用来启动服务. $ sudo /

DataVeryLite入门教程(二) Entity篇

DataVeryLite 是基于.net 4.0的数据库持久化ORM框架. 目前支持的数据库有Sqlserver,Mysql,Oracle,Db2,PostgreSql,Sqlite和Access. 最好先阅读DataVeryLite入门教程(一) 配置篇,然后再阅读本篇.如果你觉得麻烦也可以跳过. Entity是ORM中的核心对象之一,一个继承Entity的对象对应于数据库中的一个表. Entity提供丰富的API对表中的单条数据进行操作. 比如根据id或其他条件,加载,删除,插入,更新和部分

DataVeryLite入门教程(一) 配置篇

DataVeryLite 是基于.net 4.0的数据库持久化ORM框架. 目前支持的数据库有Sqlserver,Mysql,Oracle,Db2,PostgreSql,Sqlite和Access. DataVeryLite 的配置系统非常简单,稍微有点c#基础的程序猿,半小时都能上手; 不仅学习简单,编码量也非常少;熟练之后基本可以复制粘贴来完成配置. 1.连接字符串配置 a,App.config/Web.config配置方式 在<connectionStrings>节点中添加配置,示列如下

Linux 命令详解(八)Systemd 入门教程:实战篇

Systemd 入门教程:实战篇 http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-part-two.html

Photoshop入门教程(七):蒙版

学习心得:蒙版在Photoshop中也是很常用的,学会使用蒙版,可以提高图像处理能力,并且可以保护原片不被破坏,建议多使用一些蒙版. 蒙板是灰度的,是将不同灰度色值转化为不同的透明度,并作用到它所在的图层,使图层不同部位透明度产生相应的变化.黑色为完全透明,白色为完全不透明.把蒙版比喻成一层雾气盖在玻璃上.雾气越厚,窗外什么也不能看见,只有白茫茫一片(表示蒙板上填充白色);但任意擦掉玻璃上一个位置的雾气,那个位置就能清晰地看到外面(表示蒙板上填充黑色);那么如果擦不干净,就只能隐约看到外面咯(表

WebGL入门教程第1篇——六色立方

WebGL入门教程第1篇——六色立方 WebGL,一项允许开发人员在浏览器里操纵GPU来显示图形的技术.让我们一起走进WebGL的世界. 读者对象 本系列适合具有基础JavaScript知识的开发人员. 准备工作 我们应该在本地搭建好web服务器,或者安装了具有预览功能的IDE.如果你安装了Visual Studio,Nivk童鞋为我们开发了WebGL代码提示功能,你可以通过以下步骤使Visual Studio支持WebGL代码提示:打开Visual Studio——点击工具——点击选项——展开