VUE探索第二篇-手脚架(vue-cli)

不念不忘少年蓝@ 2022-05-18 00:10 242阅读 0赞

# 一、为什么需要手脚架 #

对于新手来说，建议先不要用手脚架搭建环境，特别是对nodejs不熟悉的，可以先忽略这个章节，采用引入本地vue库的方式。

当我们熟悉vue后，就会发现依赖的库越来越多，依靠开发人员维护容易出错，特别是团队协作时，成本非常高，此时就需要一种工具能帮我们解决这个问题，同时帮我们搭建一套完成的项目结构。该工具就是我们手脚架（vue-cli）。

# 二、搭建手脚架 #

## 1、安装nodejs ##

首先需要安装nodejs，可以使用“node -v”检查你的机器上是否安装过。如果没有检测到，则进行安装，从[nodejs官网][nodejs]下载安装文件

![70][]

安装的过程非常简单，如果您不知道如何选择，就默认next即可。安装完成后，可再次使用node -v检查，如显示版本号，则表示安装成功，如下：

![70 1][]

在您的环境变量中path路径中，自动添加了安装node目录。nodejs安装完成后，就可以使用npm工具包安装。

![70 2][]

在“C:\\Users\\XXXX\\AppData\\Roaming\\"(XXXX代表当前的用户)生成npm文件夹，npm工具安装的组件包都会存取在这个目录下。

![70 3][]

## 2、安装vue-cli ##

输入“**npm install -g vue-cli**”

![70 4][]

安装完成后，可以使用“**vue -V**”检查是否安装成功

![70 5][]

此时在“C:\\Users\\XXXX\\AppData\\Roaming\\npm\\node\_modules"下多了vue-cli文件夹

## 3、初始化项目 ##

命名格式：vue init <template-name> <project-name>

template-name：指定使用的模板，使用“**vue list**”查看，在这里我们采用最常用的webpack。

project-name：待创建的项目名。

![70 6][]

大约执行一分钟后，创建完成

![70 7][]

安装依赖：

![70 8][]

会根据package-lock.json描述的依赖关系，下载所依赖的包，存放在node\_modules下

![70 9][]

执行“**npm run dev**”，运行项目

![70 10][]

执行成功后，提示打开“http://localhost:8080”

![70 11][]

在浏览器中输入“http://localhost:8080”，展示如下页面

![70 12][]

那么恭喜你，大功告成。

# 三、项目结构 #

我们来看下手脚架生成的项目结构

![70 13][]

下面我们来看几个主要的文件

## 1、webpack.base.conf.js ##

webpack是对项目工程进行编译打包的工具，webpack.base.conf.js是webpack的基础配置文件，主要定义了入口文件(entry),以及编译后的文件输出位置（output）

![70 14][]

从配置可以看出，入口文件为main.js，输出到“config.build.assetsRoot”定义的路径下，即./dist目录。

可以执行"**npm run build**",看下编译的效果。

## 2、main.js ##

main.js是主入口文件，引入了vue框架，根组件，路由插件，并定义了vue的实例

![70 15][]

## 3、App.vue ##

App.vue是根组件，有三部分组成，分别为模板，脚本，样式

![70 16][]

模板中定义了一个根节点(id为app)。

<router-view>路由页面，可以理解为插槽，路由的页面都为加载此处。

## 4、index.js ##

router目录下index.js,为路由配置文件，path路径为"/",对应路由页面为“HelloWorld”组件。

![70 17][]

## 5、index.html ##

index.html可以理解为一个web页面容器，挂在main.js定义的根节点，内容有组件填充。

上一篇：[VUE探索第一篇--双向绑定原理][VUE_--]                                                             下一篇：[VUE探索第三篇-路由(vue router)][VUE_-_vue router]

[nodejs]: https://nodejs.org/en/
[70]: /images/20220518/e894c528132c499d92dab6ae9b76b1ab.png
[70 1]: /images/20220518/995a72ca6d014e0580fb8b00c014746e.png
[70 2]: /images/20220518/157abb6db3264ff3adbce0cb9842e51a.png
[70 3]: /images/20220518/28e8a1fabf9242c2b762f40e85707168.png
[70 4]: /images/20220518/f36af6e2a5a54415ac197b5fd8eaaea6.png
[70 5]: /images/20220518/4452190542fa48f0b15984d182e53578.png
[70 6]: /images/20220518/90300e6841144e07b219248978c4969f.png
[70 7]: /images/20220518/789ef681868a4c43b63ba3c674974439.png
[70 8]: /images/20220518/8ffad130312d490f9c5f24c69113a697.png
[70 9]: /images/20220518/4f9dcf28ee7742cca3a7c914dc80d61f.png
[70 10]: /images/20220518/a4b592b75c4d4e5586de7617ae29a143.png
[70 11]: /images/20220518/285f07553a114d51b695b20f87186139.png
[70 12]: /images/20220518/a9b150ce99fc49d4980aaa51feae6e43.png
[70 13]: /images/20220518/c14076e2502c4b8bac42bd8347156241.png
[70 14]: /images/20220518/086551ae8f1047ec8907c4e87c978d47.png
[70 15]: /images/20220518/20d13cf8d96249c7a990636f2d4352d2.png
[70 16]: /images/20220518/7716675f50434ae09c3331230d0ebbe3.png
[70 17]: /images/20220518/1fd41d7b5e4b4e2db6b54815bdbd9902.png
[VUE_--]: https://blog.csdn.net/tcy83/article/details/80959725
[VUE_-_vue router]: https://blog.csdn.net/tcy83/article/details/81293688