精华内容
下载资源
问答
  • Vue CLI2 脚手架2的安装方式 :cnmp install -g vue-cli Vue CLI2初始化项目: vue init webpack my-project 查看版本号:vue -V 卸载脚手架:npm uninstall -g vue-cli ...Vue CLI2 与 Vue CLI3 的区别 vue-cli 3 ..

    使用CLI脚手架的前提: 需要 node.js 和 webpack
    安装时间比较漫长

    1. Vue CLI2
      脚手架2的安装方式 :cnmp install -g vue-cli
      Vue CLI2初始化项目: vue init webpack my-project
      查看版本号:vue -V
      卸载脚手架:npm uninstall -g vue-cli
      在这里插入图片描述在这里插入图片描述

    2. Vue CLI3
      脚手架3安装指令:cnpm install -g @vue/cli
      初始化:vue create myApp
      查看版本: vue -version
      在这里插入图片描述在这里插入图片描述

    3. Vue CLI2 与 Vue CLI3 的区别
      vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3;

      vue-cli 3 的设计原则是“0配置”,移除的配置文件根目录下的,build和config等目录;

      vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化;

      移除了static文件夹,新增了public文件夹,并且index.html移动到public中;

    4. 需要注意的地方:
      Vue CLI >= 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:

      npm install -g @vue/cli-init
      

      vue init 的运行效果将会跟 vue-cli@2.x 相同

      vue init webpack my-project
      
    展开全文
  • vue cli-目录详解

    2021-01-04 20:38:55
    图片截取自B站 vue -cli2 vue -cli3

    图片截取自B站
    vue -cli2
    在这里插入图片描述
    vue -cli3
    在这里插入图片描述

    展开全文
  • Vue cli项目目录详解

    2018-07-21 16:16:01
    技术QQ交流群:294088839 1.build目录 核心目录 webpack...3.node_modules 这个一般不用管 4.src 最重要的 我们所有开发都在里面 5.static 静态文件目录 |-- build // 项目构建(webpack)相关代码 | |-- build.js ...

    技术QQ交流群:294088839

    1.build目录 核心目录 webpack有关的
    2.config目录 项目开发配置
    3.node_modules 这个一般不用管
    4.src 最重要的 我们所有开发都在里面
    5.static 静态文件目录
    |-- build                            // 项目构建(webpack)相关代码
    |   |-- build.js                     // 生产环境构建代码
    |   |-- check-version.js             // 检查node、npm等版本
    |   |-- dev-client.js                // 热重载相关
    |   |-- dev-server.js                // 构建本地服务器
    |   |-- utils.js                     // 构建工具相关
    |   |-- webpack.base.conf.js         // webpack基础配置
    |   |-- webpack.dev.conf.js          // webpack开发环境配置
    |   |-- webpack.prod.conf.js         // webpack生产环境配置
    |-- config                           // 项目开发环境配置
    |   |-- dev.env.js                   // 开发环境变量
    |   |-- index.js                     // 项目一些配置变量
    |   |-- prod.env.js                  // 生产环境变量
    |   |-- test.env.js                  // 测试环境变量
    |-- src                              // 源码目录
    |   |-- components                     // vue公共组件
    |   |-- store                          // vuex的状态管理
    |   |-- App.vue                        // 页面入口文件
    |   |-- main.js                        // 程序入口文件,加载各种公共组件
    |-- static                           // 静态文件,比如一些图片,json数据等
    |   |-- data                           // 群聊分析得到的数据用于数据可视化
    |-- .babelrc                         // ES6语法编译配置
    |-- .editorconfig                    // 定义代码格式
    |-- .gitignore                       // git上传需要忽略的文件格式
    |-- README.md                        // 项目说明
    |-- favicon.ico
    |-- index.html                       // 入口页面
    |-- package.json                     // 项目基本信息
    
    重要的几个文件
    package.json文件
     "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build": "node build/build.js"
      },
      这个字段 这个 npm run dev 就是执行了cli
      build 是为了打包用的
    
    "dependencies": {
          "vue": "^2.5.2",
          "vue-router": "^3.0.1"
    },
    生产环境
    
    webpack.base.conf.js文件
     entry: {
        app: './src/main.js'
      },
      入口文件配置
    
      .babelrc 文件 把es6代码转换成es5代码
    
    .editorconfig 文件 代码的编辑方式
    //编码格式
    charset = utf-8
    //空格键
    indent_style = space
    //两个空格
    indent_size = 2
    //换行符
    end_of_line = lf
    //在文件是否插入空行
    insert_final_newline = true
    //在文件是否删除空格
    trim_trailing_whitespace = true
    
    
    展开全文
  • 使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。 如果每个项目都要手动完成这些工作,那无以效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些...

    什么是Vue CLI

    如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI

    使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。

    如果每个项目都要手动完成这些工作,那无以效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情

    CLI是什么意思?

    CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.

    Vue CLI是一个官方发布 vue.js 项目脚手架

    使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.


    Vue CLI使用前提 - Node

    安装NodeJS 可以直接在官方网站中下载安装. 网址: http://nodejs.cn/download/


    Vue CLI使用前提 - Webpack

    Vue.js官方脚手架工具就使用了webpack模板 对所有的资源会压缩等优化操作

    它在开发过程中提供了一套完整的功能,能够使得我们开发过程中变得高效。

    Webpack的全局安装 npm install webpack -g


    Vue CLI的使用

    安装Vue脚手架 npm install -g @vue/cli

    注意:上面安装的是Vue CLI4的版本,如果需要想按照Vue CLI2的方式初始化项目时不可以的。

     Vue CLI2初始化项目 vue init webpack my-project

    Vue CLI3、CLI4初始化项目 vue create my-project


    Vue CLI2详解

    目录结构详解 

    Runtime-Compiler和Runtime-only的区别 

    如果在之后的开发中,你依然使用template,就需要选择Runtime-Compiler

    如果你之后的开发中,使用的是.vue文件夹开发,那么可以选择Runtime-only 

    两者之间的对比就是

    // runtime-compiler(v1)
    // template -> ast -> render -> vdom -> UI
    
    // runtime-only(v2)(1.性能更高 2.下面的代码量更少)
    // render -> vdom -> UI
    

     render函数的使用

     

     

     


    Vue CLI3 

    目录结构详解

     配置去哪里了?

    UI方面的配置 启动配置服务器:vue ui

     

     

     

    展开全文
  • vue-cli目录详解

    2019-07-23 16:10:55
    vue-cli脚手架目录一览 最近在学习vue,看的稀里糊涂。今天从头开始,把cli配置的vue项目目录和配置文件搞清楚。 先看看整个项目目录结构: 再看看build文件夹下相关文件及目录: config文件夹下目录和文件: 接...
  • Vue CLI配置原理详解

    千次阅读 多人点赞 2020-12-14 16:58:22
    Vue CLI 配置 看过网上的许多文章,觉得大都只是照着模仿,一套配置下来好像不太懂这是要干什么,这点对于小白很不友好,就算模模糊糊配置完也会一脸懵逼,可以看看这篇,应该对与配置脚手架有一个最基本的了解
  • vue-cli build目录详解

    2017-11-02 17:34:11
    vue-cli build目录
  • 使用Vue CLI3创建项目: 脚手架(scaffold) 指施工现场为工人操作并解决垂直和水平运输而搭设的各种支架。建筑界的通用术语。 写在前面: - 如果你只是简单的写几个Vue的**Demo**程序,那你不需要Vue CLI。 - 如果...
  • Vue CLI 3搭建项目详解

    万次阅读 2018-09-12 21:16:32
    vue cli 3 介绍 上次用vue的时候,vue cli的版本还是2,对应指令还是 vue init < 模板名称 > < 项目名称 > vue-cli提供的模板有: webpack 一个...
  • vue-cli 3 的设计原则是“0配置”,移除的配置文件根目录下的,build和config等目录 vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化 移除了static文件夹,新增了public文件夹,并且index.html移动到...
  • 使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。 如果每个项目都要手动完成这些工作,那无以效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些...
  • 本项目用的是Vue cli4,如果是vue cli3也是可以参考使用的 省略创建项目这个步骤,接下来在创建好的项目里找到public文件夹,复制多个index.html入口文件,并且修改名称; 每个入口文件只是文件名改变,里面内容...
  • 1.VueCLI详解 1.1Runtime-Compiler和Runtime-only的区别
  • Vue Cli 3 初体验(全面详解

    千次阅读 2019-06-28 15:20:26
    vue新出了 vue cli 3,并直接改名为 @vue/cli,今天就来盘他。 首先介绍等啰里啰嗦的就不写了,贴个link吧。 Vue CLi3 github Vue CLi web 安装 一、找个地方新建文件夹 二、用cmd进入文件夹(这里最好用cmd,...
  • vue-cli目录结构详解

    2018-11-23 16:01:21
    一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关文件,了解一下即可。   文件结构细分 1.build——[webpack配置]   build文件主要是webpack的配置,...
  • 主要介绍了详解Vue CLI3配置解析之css.extract,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue cli中的env详解

    2021-09-17 07:48:42
    相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 test-单测)模式。其实这是小伙伴们没有理解 vueCli 文档所...
  • vue cli 3 项目命令创建详解 创建项目:vue create item_name 默认模式或手动模式 【手动】 安装模式 选择安装特性 【如图】 安装特性 路由配置,Y为history,N为hash 【n】 路由配置 Eslint 【Standard config为...
  • Vue-CLI3详解

    2019-03-03 18:13:00
    vue-cli3快速开始 node 安装,略。 webpack 安装webpack npm install webpack webpack-cli -g 查看版本 webpack -v vue-cli 安装vue-cli npm install vue-cli -g 查看vue-cli版本 vue -V vue-cli2.x升级...
  • 主要介绍了详解Vue CLI3 多页应用实践和源码设计,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • VueCli脚手架的使用详解 介绍 VueCLI 脚手架,可以把许多项目通用的依赖包(vue、webpack、路由、vuex、less编译器等等) 和 通用的配置都给安装配置好,使得开发者可以把全部的注意力都集中在业务层面,明显提升开发...
  • Vue CLI详解1、Vue CLI(1) 什么是Vue CLI(2) Vue CLI使用前提 - Node(3) Vue CLI使用前提 - Webpack(4) Vue CLI的使用2、Vue CLI2(1) 目录结构详解(2) Runtime-Compiler和Runtime-only的区别(3) render函数的使用(4)...
  • Vue-cli3 更新 vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. 2.9.6 初始化项目是用 vue init webpack my-project 3.0以上 初始化项目是用 vue create my-project 这是因为你安装的...
  • vue cli4.0 快速搭建项目vue cli4.0 快速搭建项目详解1.进入一个目录,创建项目2.我们这里选择手动配置3.选择你需要的配置项4..选择是否使用history router5. 选择css 预处理器6.选择Eslint代码验证规则7.选择什么...
  • 主要介绍了使用vue cli4.x搭建vue项目的过程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue-CLI脚手架详解

    千次阅读 2020-09-28 20:32:08
    VueCLI categories: Vue abbrlink: 5277 date: 2020-06-12 14:22:00 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLIn 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,287
精华内容 1,714
关键字:

vuecli3目录详解

vue 订阅