Vue脚手架详解（vue脚手架2）

今天给各位分享Vue脚手架详解的知识，其中也会对vue脚手架2进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、vue 脚手架简单安装流程
• 2、使用vue-cli（vue脚手架）快速搭建项目
• 3、Vue.js脚手架的搭建和使用

vue 脚手架简单安装流程

能够显示版本号，说明环境已经安装好了。

注意：该命令需要在联网状态下执行才能成功。

这样一个简单的 vue 项目就建立完成。

项目文件结构如下图：

按照提示，打开浏览器输入地址：

最终结果如下：

到此，vue 脚手架搭建完毕，创建的一个测试项目也正常运行。

使用vue-cli（vue脚手架）快速搭建项目

下面整个过程是基于已经安装node.js和cnpm的基础上，node.js如何安装就不在这里详说了。如何全局化安装cnpm，这里简单提一下：(淘宝镜像命令)

其实对于安装vue-cli，使用npm命令和cnpm命令都是可以的，个人觉得使用npm安装的比较慢，而且很可能会因为网络问题而出错，所以还是觉得使用cnpm稳一点。

（1）全局安装 vue-cli ，在命令提示窗口执行：

（2）安装vue-cli成功后，通过cd命令进入你想放置项目的文件夹，在命令提示窗口执行创建vue-cli工程项目的命令：

通过vue-cli搭建一个vue项目，会自动生成一系列文件，而这些文件具体是怎样的结构、文件对应起什么作用，可以看看下面的解释：

Vue.js脚手架的搭建和使用

你将学到以下知识：

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

它只是一个工具，主要是它已经帮助我们简化了很多复杂操作！例如：

现在的前端，越来越复杂，特别是SPA（single page web application）流行之后，一个应用程序往往会依赖很多其他的模块，或者编译scss、less、stylus等，如果仅仅是靠人来管理是不可能的，这个时候我们必须依赖于webpack来解决。

输入 命令 vue 查看一下 ,有东西说明成功了！（如果没有成功忽略）

安装：webpack模板 （敲黑板！！！！）

出现如下图：

（成功后）cd 到自己的工程名字 （敲黑板！！！！）

可以来解析css

注意：

安装：（用来解析.css文件的loader(style-loader和css-loader)）

安装：可以创建和解析less和scss

2.6-webpack-图片字体：

可以使用图标和图片

2.7-webpack-html：

在html文件中自动引入js文件

1、安装webpack后的Vue目录：

2、src目录必须理解

4、列表说明

Vue脚手架详解的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue脚手架2、Vue脚手架详解的信息别忘了在本站进行查找喔。