zoukankan      html  css  js  c++  java
  • Vue项目搭建及原理三

    我每次写博客都要先在本地写一遍草稿,所以之前有些发布顺序可能会有一丢丢凌乱 哈哈哈,以后绝对改正,那下面我们就说一下创建及项目目录结构吧

     三.创建项目

    1.初始化Webpack

    webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。

    当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

    比如:配置 Babel 来将 ES6 编译到 ES5 用于浏览器环境。类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后编译为JavaScript文件使浏览器可以识别。Less,sass等css预处理。

    cd到工作目录中,

    #  创建一个基于 webpack 模板的新项目

    $ vue init webpack my-project

     

    2.安装依赖

    $ cd my-project

    $ npm install

     

    3.启动服务

     

    $ npm run dev

    注:可以写自己的脚本启动服务,见项目实例。

     

    项目目录结构如下:

     

    build config 这两个目录是webpack以及node服务器的配置。

    node_modules 这个目录是npm install命令执行后按照的依赖项所在目录。

    src 是用来存放项目代码的,我们的编码也都是在这个目录里进行的。

    .babelrc babel配置文件,把我们ES2105的代码通过它编译成ES5的。

    .editorconfig编辑器配置。

    .eslintignore 忽略语法检查的目录文件配置。

    .eslintrc.jseslint的配置文件。

    .gitignore配置Git仓库的忽略。

    index.html项目入口模板文件

    package.json node配置文件

    下一节我们将介绍Vue-cli及Vue工作原理

    本文章为作者原创文章,如有转载请说明出处

  • 相关阅读:
    PageRank
    Map-Reduce基础
    Docker Hadoop LAMP安装配置教程
    HDFS Architecture
    Goole Search Auto Complete
    TopK-微博今日热门话题
    Hadoop开发环境搭建
    文本数据挖掘 Matrix67: The Aha Moments
    神经风格转换Neural Style Transfer a review
    神经风格转换 (Neural-Style-Transfer-Papers)
  • 原文地址:https://www.cnblogs.com/hongsusu/p/8525337.html
Copyright © 2011-2022 走看看