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

一、为什么需要手脚架

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

<script src="v2.2.2/vue.min.js"></script>

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

二、搭建手脚架

1、安装nodejs

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

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

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

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

2、安装vue-cli

输入“npm install -g vue-cli”

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

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

3、初始化项目

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

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

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

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

安装依赖：

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

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

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

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

那么恭喜你，大功告成。

三、项目结构

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

 

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

1、webpack.base.conf.js

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

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

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

2、main.js

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

3、App.vue

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

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

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

4、index.js

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

5、index.html

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

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