如何使用Vue-cli脚手架工具+webpack快速搭建项目结构及项目结构分析及项目打包发布详细步骤

Vue-cli脚手架工具简介

为了更加地方便我们去开发vue的应用程序，vue它提供一套工具，你可以通过vue-cli去快速地构造你的项目结构。Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页（spa）应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

1.步骤

1.1全局安装 vue-cli

npm install vue-cli -g

1.1.1 创建一个基于 webpack 模板的新项目。

 当你完成了vue-cli的安装之后，你就可以使用vue这个命令了。

vue init webpack 你的项目名

这个项目的目录，会自动去创建好。

这个过程你需要去回答一些问题。（就好像我们去运行npm init 一样）

此时，它已经给你建立好了一个名为helloworld的文件夹，其中已经搭建了项目的目录。

现在，远没有结束！！！！

要继续

1.1.2 进入项目目录，安装依赖

方式一：

直接在资源管理器进入 。在右键，打开小黑窗

方法二：cd 项目名

 

安装依赖

这个项目要正常工作 ，还需要安装很多的包。具体可见：

通过运行 npm install 命令去把package.json中的包都进行安装。

npm install

由于包比较多，这个过程可能会比较慢。

1.1.3运行这个项目

npm run dev

这个dev命令是脚手架工具已经写在package.json中的scripts中的命令。

是要在node环境中去运行build这个目录下的dev-server.js这个文件。

1.1.4 效果如下

1.2  目录结构说明

目录/文件	说明
build	构建项目的配置目录
config	配置目录，默认配置没有问题，所以我们也不用管
node_modules	项目开发依赖的一些模块
src	开发目录，基本上绝大多数工作都是在这里开展的
static	资源目录，我们可以把一些图片，字体，放在这里
.xxxx文件	配置文件，包括语法配置，git配置等。基本不用管
index.html	首页入口文件
package.json	项目配置文件。
README.md	说明文件

你可以去查一查.md格式。

1.3 单文件组件

把一个组件所需要的代码全写在一个单独的文件中。换句话，一个文件就是一个组件，vue给这个文件取了一个特殊的后缀名:.vue。

1.3.1 为什么需要这么做？

我们之前写组件的方式比较零散：要有template:

要创建对象：

这个组件中的html标签还可能有自己的样式

一个组件就被拆成三个部分！！

现在我们可以有一种新的方式去把这三个部分组合一个单独文件中！

1.3.2. 参观一下

App.vue

Components/hello.vue

1.4 分析整体项目的工作流程

1.4.1 入口：Main.js 

一切的入口在这里。

只有一个vue实例，会挂载到index.html中的div#app上。

1.4.2   根组件：app.vue

 

在上面的template中，可以看到不管载入哪个组件，这个图片是一直存在的。

1.4.3. 路由：router/index.js

路由对象在vue的实例中被注入，具体的代码在main.js中。

现在，去查看router/index.js中的设置项。

1.4.4   去进一步查看hello组件

1.4.5. 结构图

1.5.示例：添加一个组件 test.vue

1.5.1. 创建文件

直接.vue格式，会自动分成三块。

1.5.2. 在路由中使用组件

配置路由对象。

1.5.3  测试

1.6. 单文件组件的三个部分的使用细节

1.6.1  Template

就是相当于是

{

template :”#app”

}

已经直接被写好了，就是template标签中的内容。它可以是：

（1）html标签

（2）各种vue指令

（3）或者是数据项

1.6.2   Script

你可以写任何的js代码。

在export default {} 中，就相当于是你定义的组件对象，我们之前定义的组件的：

Ø Data

Ø Computed

Ø Filters

Ø Methods

Ø Components

都一样可以用

你也可以继续在组件中去使用其它的组件。

1.6.2  Style

就是设置当前组件的样式。

有两点要注意：

1.6.2.1 Scoped (scope 作用域)

如果在style上添加scoped，则会在生成样式同时，加上一些独一无二的标记符，它们的作用就是让这个样式会作用于当前的组件.

1.6.2. Lang

如果你想用其它的css的预编译语言去写样式：

如less,sass.....也可以。

你只需要把lang设置一下：

加这一句后，代码会报错。

这里我还需去安装两个包：less,less-loader. 

结束当前的命令。Ctrl+c,

 去安装一下包：

Npm install less less-loader --save-dev 

我们并不需要像前面使用webpack 一样去进行配置。因为它已经给我们配置好了。

 安装完成之后，再次启动项目：

Npm run dev

 就可以看到效果。

1.7. 打包项目

你在开发测试完成之后，则要对项目进行打包。

 命令：

build也是在 package.json中已经设置好的scripts：

打包的结果如下：

具体看下，打包后的文件在哪？

会在放一个新创建的文件夹中：

你可以先全局安装一个包：http-server

npm install http-server -g

它就可以产生一个虚拟的服务器（你也可以把整个的文件夹上传到 github上去，也可以）。

我们进入到当前目录，打开小黑窗，运行http-server：

 再次通过浏览器，输入地址去访问。