前端框架——Vue脚手架

Posted 2021-01-18 buwang

 

Vue是当前最流行的三大前端框架之一，刚学Vue的时候感觉也没什么新奇的地方，后来对Vue的接触深了才知道这个框架流行的原因了。

现在进入正题：

先说一说脚手架的作用——它能帮助你快速开始一个vue项目，其实其本质就是给你一套文件结构，包含基础的依赖库，你只需要npm install一下就可以安装。让你不需要为编译或其他琐碎的事情而浪费时间，这并不会限制到你的发挥。

 

如何安装：

进入网址后，选择下载方式最好是选择官网

链接】安装Node.js和npm
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450141843488beddae2a1044cab5acb5125baf0882000

 

下载完事后在“终端”按照以下的步骤完成：

（本人是Mac，windon的用户根据自己终端指令完成）

1、确保安装过vue-cli模块 npm install vue-cli -g
2、初始化本地项目（下载脚手架摸版）vue init webpack xxx(工程名称)
vue-router：路由器组件：YES
（YES完事是三个no，具体的记不太清楚）（一个YES三个NO，记住就好了）
3、进入到工程文件夹下，cd xxx
4、运行项目于本地服务器，npm run dev

当出现这种样式，这名你已经完成了脚手架的创建！ 你就可以在网址上输入：http://localhost:8080  看看效果

 

用你的编译软件，找到脚手架的位置，打开。你会看到很多的文件。

给你们整理了一下，看一下这些文件用处：

     build                                         ——项目配置文件夹

     build.js                                         ——项目环境配置代码

     check-version.js                          ——检查node-npm版本的插件

     logo.png                                      ——vue的logo图片

     utils.js                                          ——项目配置变量

     vue-loader.conf.js                        ——在.vue文件中用于处理css的规则

     webpack.base.conf.js                  ——webpack基础配置

     webpack.dev.conf.js                    ——webpack开发环境配置（包括测试服务器环境）

     webpack.prod.conf.js                  ——webpack生产环境配置（打包时的配置代码）

     config                         ——环境变量的配置

     dev.env.js                     ——开发环境变量配置

     index.js                         ——webpack相关变量配置（开发环境接口代理在这里配置）

     prod.env.js                    ——发布环境变量配置

     node_modules          ——当前工程下载的第三方模块插件包（npm下载和管理的模块所在的位置）

     src                              ——源码目录

     assets                           ——静态资源文件（会被webpack构建并打包的）

     logo.png                         ——logo图片属于静态资源

     components                  ——vue公共组件

     HelloWorld.vue               ——一个组件文件(.vue)

     router                             ——路由配置

     index.js                            ——具体路由代码

     App.vue                         ——vue的页面入口，打开的页面就是这个文件

     main.js                    ——webpack打包的入口文件，加载各种组件、配置、变量

     static                            ——纯静态资源文件夹，不会被webpack打包

 　 babelrc　　　　　　——es6语法编译配置

     editorconfig　　　　　　——定义代码格式

     gitignore　　　　　　——git上传时需要忽略的文件的列表

     postcssrc.js　　　　　　——postcss-loader模块配置文件，用于加载css

     index.html　　　　——项目真正的入口（app.vue需要嵌入在html里）

     package.json　　　　——项目基本信息(包括一些指令等)

     package-lock.json　　　　——项目依赖包版本，锁定文件

     README.md　　　　　　——项目说明文件（使用markdown语法编写）