vue 脚手架(一,创建脚手架)

 本文以转移至本人的个人博客,请多多关注!

 本文以转移至本人的个人博客,请多多关注!

 本文以转移至本人的个人博客,请多多关注!

 本文以转移至本人的个人博客,请多多关注!

经过一段时间对Vue的学习。觉得是时间来回顾一下所学成果了。所以在此开个专题系列随笔,回顾一下vue以及相关知识。

我在用Vue之前试过React,但是我真真受不了JSX这种语法。因为我是后端人员转前端。作为使用过jsp和servlet的人员。当我第一次看到JSX语法的时候,让我顿时想起了在Servlet中拼HTML代码时的恐惧,果断放弃了React。

当然。这是我自己的一点感受。在javaEE体系中。Servlet早于JSP,其实JSP就是另一种模式的Servlet,当时提出JSP就是为了解决在Servlet中拼接Html代码的痛苦。但是JSP最后还是会编译成Servlet。之后为了更彻底的解决这种痛苦,出现了freemark等一系列的框架,彻底摆脱了JSP。然而JSX的语法让我有一种开历史倒车的感觉。这一点上Vue的模板语法和React的Render方法对比很是明显。

三大前端框架,Vue, React, angularJs 2+ 。Vue以其简单易用的优点而广受好评,并且其社区也在火速发展,与其配合的第三方框架也在不断增长中。

其中有个vue-element-admin开源项目(https://panjiachen.github.io/vue-element-admin-site/zh/),是一个很好的基于Vue和ElementUI的后台管理系统模板,再次推荐一下。

这里咱们先不管这个大项目。先从Vue自身提供的一个模板说起。Vue提供了自己的构建工具vue-cli。可以快速的搭建一个脚手架项目。

npm install vue-cli // 安装vue-cli

vue init webpack myProject //初始化项目

 vue-cli 提供的脚手架有多个。这里咱们选用webpack这个,因为大部分应该都是用的webpack,应用比较广泛。

此脚手架的构建结果结构如下:

 

下面大体介绍一下各个目录的功能。详细的介绍会在以后的章节中陆续介绍。

1. bulid: 此目录下有构建项目时使用的配置文件。

2. config:此目录下是项目的环境常亮配置,提供给build中的文件使用

3. src:项目的源码所在目录。

4 static: 项目的静态资源文件,其中的 .gitkeep文件是git使用的一个占位文件。

再说一下下面的几个文件。其实也不用说。基本都知道是干啥的。

1 .babelrc babel配置文件,详见(https://www.babeljs.cn/docs/setup/#installation)

2 .editorconfig 这个是为了统一不同编辑器的代码格式风格。

3 .eslinttrc.js eslint 的配置文件。详见(https://cn.eslint.org/docs/user-guide/configuring)

4 .postcssrc.js  PostCSS 的配置文件。详见(https://www.npmjs.com/package/postcss)

5  index.html 项目首页的模板

6  package.json node使用的文件。

7  package-lock.json 用于锁定依赖的版本。可以参考(http://www.cnblogs.com/cangqinglang/p/8336754.html)这位兄台的解释。

8 .gitignore git的忽略文件列表

9  Readme.md 项目自述文件

原文地址:https://www.cnblogs.com/qufanblog/p/10345586.html