前端框架——Vue脚手架

Posted buwang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端框架——Vue脚手架相关的知识,希望对你有一定的参考价值。

 

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语法编写) 
 
 






以上是关于前端框架——Vue脚手架的主要内容,如果未能解决你的问题,请参考以下文章

前端框架之VUE

前端进阶之路-一如何用gulp搭建一套web前端开发框架

Vue.js高仿饿了么外卖App 最火前端框架

vue前端框架实用基础篇

06-前端开发框架VUE技术应用总结

Web前端-Vue.js必备框架