新手使用npm搭建第一个官方vue（vue-cli）项目---（一）

本文详细介绍Vue初学者如何从零开始搭建开发环境，包括使用vue-cli脚手架、配置webpack及项目结构解析。同时，介绍了核心概念如数据驱动，并推荐了UI组件库iview，帮助快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介：

对于初学vue，基本什么都不了解，甚至看了官方教学视频，也无法搭建一套web，以下应用了vue-cli脚手架，使用vscode，npm搭建起第一个vue项目。
（其他方式也都可以）
借鉴其他作者：
原文地址https://www.cnblogs.com/buzhiqianduan/p/7620102.html.

一、环境搭建

假设你已经通读vue官方文档（文档都没读一遍（至少），那不建议动手撸码），在大致了解vue是什么东西，有什么用，核心概念之后我们就可以开始着手学习vue。首先搭建环境。

学习vue，我的建议是通过官手脚手架起步。

>>>Installation    全局安装（-g）
$ npm install -g vue-cli

>>>Usage  使用格式
$ vue init <template-name> <project-name>

>>>Example: 使用示例  所创建工程为 myproject
$ vue init webpack my-project

在这里插入图片描述
这里我使用的是yarn安装，npm最好还要配置一下淘宝源
(npm/cnpm淘宝源设置)[https://blog.csdn.net/qq_40761920/article/details/105488719].

根据需要安装插件yes or no,一直回车，脚手架就生成了。接下来剖析脚手架结构。
(这其中需要自行将npm，node，yarn等搭建完成，之后进行npm run dev即可)
(npm run dev跑不起来的，看看是不是在所在当前目录如：上述内容cd my-project)
在这里插入图片描述
然后就会看到首页了

二、脚手架结构剖析

再开始写项目之前，我们需要弄清什么地方写什么代码。

1、build文件夹

webpack配置文件。此处配置webpack规则。整个项目是通过webpack支持的。比如你要使用less，你需要在webapck规则里使用less。

2、src 文件夹

撸码的地方～基本你所有的代码都在这一块完成。

assets文件夹
存放web中引用的图片媒体资源。
components文件夹
主要存放可复用组件，你可以在任意页面中复用这些组件。
router文件夹
index.js 路由配置文件。在此处配置各个页面的跳转引用关系。
APP.vue
这里看一看做页面的根部。我们可以在这个页面进行一些css reset 操作。
main.js
根逻辑，页面加载首先会加载这份js文件。

3、static文件夹

主要存放外部引用资源。比如xxx.min.js
index.html
vue是spa应用，所以只有一个入口，也就是index文件，这里我们进行一些不可更改资源（比如某某库）的引用，和html页面meta 、title之类的设定。

4、index.html

vue是spa应用，所以只有一个入口，也就是index文件，这里我们进行一些不可更改资源（比如某某库）的引用，和html页面meta 、title之类的设定。

5、vue核心概念

vue的核心概念是‘数据驱动’，假如我们需要切换view层，我们应该修改的是数据。下面我会分享一些我自己在学习vue中收获的一些实例，大家自行感受。

实例展示的是方法论，概念性一样的东西，不要被例子局限，要将思维扩散出去。知识点学习还是看官方文档为主。

三、可监测的全局变量——vuex

项目开发中，往往我们会有一些全局变量，但是正常全局变量，vue是不能监测的，这个时候vuex就派上用场了。 vuex官方文档

四、如何开始写第一个demo项目

看完以上内容，想必大家对vue都有了进一步的了解。在通读官方文档后，我们对vue都有一个大致的了解，这样其实对于新手而言还是没有方向去写一个demo出来的，我们往往想写个漂亮的demo，但这样就必须花大量时间去写html和css，这点博主深有体会，看了2遍文档后还是不知道怎么去入手写个demo练手。这里博主有个建议就是：
专注于vue本身，而不是花过多的时间去写html，css。
以上我们已经搭建了一个vue开发环境，接下来就是找一款心仪的UI组件库，博主这里推荐iview，个人感觉非常漂亮。然后就是构思你的demo要写什么，好了，拖组件搭UI，开始写真正写项目代码把，把更多时间花在vue学习之上。
vue的扩展性或支持性很强，也有很多模板框架可供选择。
ant-desgin-vue等啊
在这里插入图片描述

五、后记

写到这里也就告一段落了。通过项目去学习vue，在这个过程碰到问题解决问题，就是一个效率的学习方法。
以后回过头来看，“自己以前这个demo写的这么垃圾？” 就说明你又进步了。入门第一步，框架用的好，用的熟练，当表面已经无法满足我们的时候，OK ，深入框架的时机到了。可以开始研究vue是怎么实现数据绑定，怎么实现数据响应式这些更深层的技术原理了。
原文地址https://www.cnblogs.com/buzhiqianduan/p/7620102.html.