• 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 项目自述文件

  • 相关阅读:
    8月15日
    【k8s】创建 tls 类型 Secret
    使用 openssl 生成 CA 证书
    【k8s】跨 Namespace 使用 Ingress
    Windows 和 Centos 导入 CA 证书
    使用 openssl 生成服务器证书
    【k8s】nginx ingress 配置 https
    【k8s】通过 https 访问 dashboard
    1012day人口普查系统
    8.3日志
  • 原文地址:https://www.cnblogs.com/qufanblog/p/10345586.html
Copyright © 2020-2023  润新知