• 【Vue CLI】从安装到构建项目再到目录结构的说明


    "Vue CLI是一个基于Vue.js进行快速开发的完整系统.

    Vue CLI致力于将Vue生态中的工具基础标准化。它确保了各种构建工具只需给予智能的默认配置便可平稳衔接.

    这样我们就可以专注在撰写应用上,而不必花好几天去纠结配置的问题。于此同时,它还为每个工具提供了调整配置的灵活性.

    Vue CLI的概念:
    ·
    通俗的说,Vue Cli是我们创建大型项目时的"脚手架".
    所谓的脚手架,就是帮助我们建设好了建造大厦的所需模块,建设者只需往模块里面填入实质的内容,即可完成大厦的建设.
    对于程序开发来说,脚手架使程序员只需要关注业务逻辑的实现上面,我们不需要再关注兼容性问题,不需要再浪费时间在重复的工作上.
    ·
    Vue Cli能够帮助我们快速的构建大型Web应用,提升了我们的开发效率.
    Vue Cli是基于Webpack构建的,并带有合理的默认配置.

    关于Webpack的安装及使用,请参考此文献:https://blog.csdn.net/qq_41964425/article/details/83997312

    Vue CLI的安装:
    ·
    这里我们将使用npm全局安装Vue Cli 2版本.
    Vue Cli 2和Vue Cli 3的安装方式略有不同,因为Vue Cli 3将包名称由vue-cli改成了@vue/cli.
    下面是使用npm方式全局和本地安装Vue Cli 2和Vue Cli 3的命令:
    ·
    全局安装:
    npm install -g vue-cli 版本2
    npm install -g @vue/cli 版本3
    ·
    本地安装:
    npm install vue-cli --save 版本2
    npm install @vue/cli --save 版本3
    ·
    npm的安装命令可简写为:npm i xxxx
    ·
    补充:如果是Mac系统,可能需要加上sudo(权限问题,包括本文中后续的所有命令),即:sudo npm install -g vue-cli,回车后输入当前用户的密码即可.

    关于npm的安装及使用,请参考此文献:https://blog.csdn.net/qq_41964425/article/details/83993514

    @


    1. 构建我们的项目

    步骤一:
    首先,我们打开终端,输入安装命令:npm i -g vue-cli.
    (这里我们使用全局安装方式安装Vue Cli 2版本).

    步骤二:
    然后,我们进入自己的工作目录,输入vue init webpack vue-demo来构建一个名为vue-demo的项目.
    过程中会提示我们输入一些信息,如果出现提示是否需要安装VueRouter和单元测试等功能,那么请根据你的项目实际需求输入Yes/No,这里我们将按照下图进行输入:
    在这里插入图片描述

    步骤三:
    构建完成之后,会在我们的工作目录中生成一个名为vue-demo的文件夹.
    我们进入此文件夹,可以看到项目结构如下:
    在这里插入图片描述
    此时,我们打开终端,进入刚刚生成的vue-demo文件夹,输入启动命令:npm run dev.
    最后,在浏览器中访问:http://localhost:8080/ ,如下图:
    在这里插入图片描述
    到这里,我们的Vue项目已经构建完成了.
    下面我们来看看项目根目录下的各目录和文件的功能.


    2. 目录结构说明

    2.1 build目录

    在这里插入图片描述
    build目录中的文件主要用于webpack配置.

    重要的三个文件:

    1. webpack.base.conf.js:用于基本webpack配置.
    2. webpack.dev.conf.js:用于开发环境webpack配置.
    3. web pack.prod.conf.js:用于生产环境webpack配置.

    nom run build命令是用来构建生产环境的,而build.js文件就是该命令的入口配置文件,主要用于生产环境.

    2.2 config目录

    在这里插入图片描述
    config目录中的文件是用来配置项目测试和运行环境的.

    index.js文件中有一个proxyTable属性,该属性的属性值如果加上对应的后台地址和端口,便可以和后台进行联调.

    2.3 src目录

    在这里插入图片描述
    src目录存放的是我们的项目源文件,它是整个项目使用频率最高的文件夹.

    assets目录存放的是公共的资源,会被webpack当成模块资源处理;
    components目录存放的是我们整个项目的所有组件;
    router目录存放的是我们整个项目的路由文件;
    App.vue文件是所有vue文件的出口;
    main.js文件对应App.vue文件,用于创建vue实例,也是入口文件,对应web pack.base.config.js文件里的入口配置文件.

    2.4 static目录

    在这里插入图片描述
    该目录用来存储项目的静态文件,它是真正的静态资源,完全不被webpack处理.



    "

  • 相关阅读:
    ZCMU 暑期练习赛【识别】
    P1024 一元三次方程求解
    P1059 明明的随机数
    P2670 扫雷游戏
    ESP32手动搭建Arduino环境
    基于arduino的气象站
    序列归并
    结构体数组排序:1004 成绩排名 【pta】
    C语言:大数求和
    centos7 安装mongodb replica set 集群搭建
  • 原文地址:https://www.cnblogs.com/zyk01/p/11376178.html
Copyright © 2020-2023  润新知