zoukankan      html  css  js  c++  java
  • 05VueCli

    详情请见: https://pizzali.github.io/2018/10/30/VueCli/

      Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性。
    1. 概念
    通俗的说,Vue CLI是我们创建大型项目时的脚手架,所谓脚手架,就是帮助我们建设好了建造大厦的所需模板,建设者只需往模板里面填入实质内容,即可完成大厦的建设,对于程序开发来说,脚手架使程序员只需要关注业务逻辑的实现上面,我们不需要再关注兼容性问题,不需要再浪费时间在重复的工作上。
    Vue Cli帮助我们快速构建大型web应用,提升了我们的开发效率,它基于webpack构建,并带有合理的默认配置
    2. 安装
    我们使用npm安装Vue Cli,Vue Cli 2和Vue Cli 3的安装方式略有不同,因为Vue Cli 3将包名称由vue-cli改成了@vue/cli,下面我们分别使用全局和本地的方式安装Vue Cli2和版本3:
      2.1 全局安装

    // 版本2
    npm install -g vue-cli
    // 版本3
    npm install -g @vue/cli

      2.2 本地安装

    // 版本2
    npm install vue-cli --save
    // 版本3
    npm install @vue/cli --save

    3. 构建我们的项目
      3.1 安装好Vue Cli之后,下面我们来搭建一个项目本文测试采用的是全局安装的Vue Cli 2版本。
         进入项目环境,创建初始化项目:
        3.1 vue基于webpack构建项目
        3.2 mydemo是我们的项目名称

      3.2 创建过程中,会出现提示是否需要安装VueRouter和单元测试等功能,根据你的项目实际需要输入Y/N即可。
      3.3 构建完成之后,在项目根目录下会生成一个mydemo目录,然后根据提示,进入mydemo项目,我们的项目结构如下:

      3.4 运行npm run dev, 出现如下提示后,在浏览器中访问  http://localhost:8080

    npm run dev
    
    > mydemo@1.0.0 dev /Users/pizza/Downloads/vue-demo/mydemo
    > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
    
     95% emitting                                                                        
    
     DONE  Compiled successfully in 2403ms                                                                                              
    
     Your application is running here: http://localhost:8080

      3.5 浏览器中会出现Vue的欢迎页面,如下图所示:

    至此,我们的Vue项目构建完成了。下面解释一下项目根目录下的各目录和文件的功能。

    4. 目录结构说明
      4.1 build目录

      build目录中的文件主要是用来进行webpack配置。
      其中最重要的就是webpack.base.conf.js, webpack.dev.conf.js, webpack.prod.conf.js三个文件,分别是基本webpack配置、开发环境webpack配置、生产环境webpack配置。
      npm run build命令是用来构建生产环境的,而build.js文件就是该命令的入口配置文件,主要用于生产环境。
      4.2 config目录

        config目录中的文件是用来配置项目测试和运行环境的。
      在index.js文件中有一个proxyTable属性,该属性的属性值如果加上对应的后台地址和端口,就可以和后台进行联调。
      4.3 static目录
        static目录用来存储项目的静态文件。它是真正的静态资源,完全不被webpack处理。
      4.4 src目录

        src目录存放的是我们项目的源文件,它是整个项目使用频率最高的文件夹。
    assets目录存放的是公共的资源,会被webpack当成模块资源处理;
    components目录存放的是我们整个项目的所有组件;
    router目录则存放的是我们整个项目的路由文件;
    App.vue文件是所有vue文件的入口;
    main.js对应App.vue 创建vue实例,也是入口文件,对应webpack.base.config.js里的入口配置文件。
    5. 迁移我们的项目
    接下来,我们将前面写的路飞学城项目迁移到Vue Cli的结构中。
    初始化一个luffycity项目

    vue init webpack luffycity

    初始化完成之后,在当前目录下面会出现一个luffycity的目录,目录结构与上述项目是一致的。我们即将项目填充进这个脚手架中。
    准备内容
    并将图片存入static目录下, 如下图:

    配置路由
    如下图:

    使用组件
    如下图:

    配置Vue实例
    创建Vue实例,配置路由组件,同时安装element-ui并导入,如下图:

    最后使用命令npm run dev运行项目。至此我们已经将之前的项目完整的迁移到Vue Cli中。

  • 相关阅读:
    171 01 Android 零基础入门 03 Java常用工具类02 Java包装类 01 包装类简介 01 Java包装类内容简介
    170 01 Android 零基础入门 03 Java常用工具类01 Java异常 08 Java异常总结 01 异常总结
    169 01 Android 零基础入门 03 Java常用工具类01 Java异常 07 异常链 01 异常链简介
    168 01 Android 零基础入门 03 Java常用工具类01 Java异常 06 自定义异常 01 自定义异常类
    167 01 Android 零基础入门 03 Java常用工具类01 Java异常 05 使用throw和throws实现异常处理 02 使用throw抛出异常对象
    166 01 Android 零基础入门 03 Java常用工具类01 Java异常 05 使用throw和throws实现异常处理 01 使用throws声明异常类型
    165 01 Android 零基础入门 03 Java常用工具类01 Java异常 04 使用try…catch…finally实现异常处理 05 return关键字在异常处理中的使用
    DevExpress WPF v20.2版本亮点放送:全新升级的PDF Viewer
    界面控件DevExpress使用教程:Dashboard – 自定义导出
    DevExpress WinForms帮助文档:表单控件
  • 原文地址:https://www.cnblogs.com/chengxiaofeng/p/10666766.html
Copyright © 2011-2022 走看看