Vue-CLI详解_vue cli-程序员宅基地

技术标签: # Vue  vue  js  

Vue-CLI详解

如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI;如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作,那无以效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。用vue.js开发大型应用需要使用webpack打包工具

Vue CLI

CLI是什么意思?

  1. CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架
  2. Vue CLI是一个官方发布 vue.js 项目脚手架
  3. 使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.

Vue CLI的安装

来自官网vue-cli

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -gyarn global remove vue-cli 卸载它。

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvmnvm-windows 在同一台电脑中管理多个 Node 版本。

可以使用下列任一命令安装这个新的包:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确:

vue --version

E:\webpack\webpacktestvue>vue --version
@vue/cli 4.0.5

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

拉取 2.x 模板 (旧版本)

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

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `[email protected]` 相同
vue init webpack my-project

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

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

Vue CLI2

创建项目

E:\webpack\vue-cli2-test>vue init webpack vue-cli2-test 
# 会根据vue-cli2-test名称创建一个文件夹,存放之后的项目内容,该名称也会作为默认的项目名称,但是不能包含大写字母
? Project name vue-cli2-test
# 项目名称,不能包含大写
? Project description A Vue.js project
#项目描述
? Author zysheep <[email protected]>
# 作者的信息,默认在git中读取信息
? Vue build runtime
# 选择第二个
? Install vue-router? No
# 是否需要路由
? Use ESLint to lint your code? No
# ESlint检测代码规范
? Set up unit tests No
# 单元测试
? Setup e2e tests with Nightwatch? No
#e2e测试
? Should we run `npm install` for you after the project has been created? (recommended) npm
# 选择npm安装
   vue-cli · Generated "vue-cli2-test".

目录结构详解

Runtime-Compiler和Runtime-only的区别

总结

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

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

render和template

Runtime-Compiler Runtime-only

为什么存在这样的差异呢?

  • 我们需要先理解Vue应用程序是如何运行起来的。
  • Vue中的模板如何最终渲染成真实DOM。

Vue程序运行过程

render函数的使用

new Vue({
  el: '#app',

  render: (createElement) => {
    //使用方式一
    //return createElement('标签','相关数据对象(可以不传递)',['内容数组'])
    //1.1 render函数基本使用
    //return createElement('div',{class:'box'},['三月三'])
    //1.2 嵌套render函数
   //return createElement('div',{class:'box'},['三月三',createElement('h2',['标题'])]);
   //使用方式二  传递一个组件对象
    return  createElement(App)
  }
})

Vue CLI3

vue-cli 3 与 2 版本有很大区别

  • 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中

创建vue-cli3

E:\webpack>vue create vue-cli3-test


Vue CLI v4.4.4
? Please pick a preset: Manually select features  
# 选择配置方式,这里我选择手动配置
? Check the features needed for your project: Babel 
# 选择自己需要的配置空格选中或反选
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
# 对应的配置单独生成文件还是放在package.json中
? Save this as a preset for future projects? No
# 要不要把刚才自己选择的配置保存下来

目录结构详解

如果发现没有babel.config.js,原因是在手动配置的时候没有选择Babel

配置去哪里了?

启动配置服务器:vue ui

修改配置

如果对配置不满意,可以在根目录创建vue.config.js进行修改配置,如:前后端分离时,解决前端跨域问题

module.exports = {
    
   // 解决无法加载less的问题
    css: {
    
        loaderOptions: {
    
          less: {
    
            javascriptEnabled: true,
            modifyVars: {
    
              "primary-color": "red"
            }
          }
        }
      },
      // 解决跨域问题
      lintOnSave: false,
      devServer: {
    
        // 设置代理
        proxy: {
    
           "/api":{
    
	         target: 'http://localhost:5000',  // 后端接口api地址
	          changeOrigin: true,// 开启代理:在本地会创建一个虚假服务器,然后发送请求的数据,
	                            //并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
	          pathRewrite: {
      // 路径重写:将路径中 /api 替换为''(空字符串),保证路径访问正确,如:'/api/search/users2'====>'http://localhost:5000/search/users2'
	              '^/api': ''
	          }
            }
        }
        
    }
    
};

箭头函数

箭头函数表达式的语法比函数表达式更简洁,并且没有自己的thisargumentssupernew.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。

基础语法

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression
//相当于:(param1, param2, …, paramN) =>{ return expression; }

// 当只有一个参数时,圆括号是可选的:
(singleParam) => { statements }
singleParam => { statements }

// 没有参数的函数应该写成一对圆括号。
() => { statements }
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_45297578/article/details/116244941

智能推荐

Cadence OrCAD Capture 复制粘贴电路时元器件编号保持问号的方法图文教程_cadence中怎么复制电阻时是问号-程序员宅基地

文章浏览阅读548次,点赞2次,收藏5次。本文简单介绍使用Capture软件复制电路时保持元器件编号保持问号的方法。_cadence中怎么复制电阻时是问号

Python程序员Debug的利器,和Print说再见 | 技术头条-程序员宅基地

文章浏览阅读2.3k次,点赞41次,收藏95次。【导语】程序员每日都在和 debug 相伴。新手程序员需要学习的 debug 手段复杂多样,设置断点、查看变量值……一些网站还专门针对debug撰写了新手教程。老司机们在大型的项目中要 debug 的问题不一样,模块众多、代码超长,面对大型项目的debug之路道阻且长。针对新手和老手程序员会遇到的不同debug问题,本文推荐了两个GitHub上的开源debug工具:PySnooper 和 Be..._python 除了用print检查变量

安装并配置jdk_挂载jdk.iso并安装jdk-程序员宅基地

文章浏览阅读401次。安装jdkjdk下载地址.两种下载方式安装包和压缩包,主要介绍安装包但是也介绍压缩包安装包下载打开此文件进入安装界面,由于已经安装,不在详细演示安装分两个步骤JDK安装打开安装程序后 会有安装路径选择,可自行选择位置安装,但是最好文件夹名带jdk,比如jdk1.8.0_231如过自行选择安装路径,则下一步的jre安装也要选择相同路径示例图如下jre安装上述已经说明环境..._挂载jdk.iso并安装jdk

戴尔INSPIRON 14-7472 DDH40 DDH50 LA-F251P r1.0笔记本图纸_ddh40 la-f251p 图纸-程序员宅基地

文章浏览阅读991次。戴尔INSPIRON 14-7472 DDH40 DDH50 LA-F251P r1.0笔记本图纸 品牌 戴尔 型号 INSPIRON 14-7472 主板版号 DDH40 DDH50 LA-F251P 图纸类型 笔记本电路图 图纸格式 PDF 其他信息 戴尔INSPIRON 14-7472 DDH40 DDH50 LA-F251P r1.0笔记本图纸.pdf Compal Confidential DDH._ddh40 la-f251p 图纸

phpredis手册_php redis 手册-程序员宅基地

文章浏览阅读1.3k次。Skip to contentPull requestsIssuesMarketplaceExploreSign out Watch 513 Star6,474 Fork1,680phpredis/phpredis Code Issues 87 Pull requests 17 InsightsA PHP extension for Redisphpredisredis-clustercclust..._php redis 手册

rtl8821cu wifi调试记录_8821cu wlan-程序员宅基地

文章浏览阅读1.5k次。3188 android5 rtl8821cu wifi调试记录开始遇到的问题:1.drivers/net/wireless/rockchip_wlan/rtl8821cu/os_dep/linux/usb_intf.c:1631:31: fatal error: linux/rfkill-wlan.h: No such file or directory//#include <linux/rfkill-wlan.h>2.drivers/built-in.o: In function_8821cu wlan

随便推点

关于在IDEA中使用Hibernate框架,以及出现的错误总结_idea hibernate插件-程序员宅基地

文章浏览阅读2.1k次,点赞3次,收藏5次。在IDEA中初次创建是没有Hibernate框架的,所以需要引入Hibernate插件,在setting–>plugins中搜索此插件安装即可;安装好插件以后具体的配置信息可以看这篇文章:https://www.cnblogs.com/solverpeng/p/5915823.html关于一些基本的Hibernate配置:<?xml version='1.0' encoding='utf-8'?><!DOCTYPE hibernate-configuration PU_idea hibernate插件

解答c语言的app,你学c语言用的什么app?-程序员宅基地

文章浏览阅读4.2k次。这里简单介绍2个可以直接编译运行C语言的手机APP,分别是C语言编译器和C++编译器,对于大部分简单的程序来说,这2个软件都可以轻松编译并运行,感兴趣的朋友可以尝试一下:01C语言编译器这是一个非常精简的手机C语言编程软件,主要为C语言初学者提供核心的功能,能够随手验证一些小程序,免费、小巧、灵活,下面我简单介绍一下这个软件的安装和使用:1.首先,安装C语言编译器,这个直接在手机应用商店中搜索就行..._有教学c语言的软件吗

darknet环境安装_darkenet 环境安装-程序员宅基地

文章浏览阅读619次。参考:https://www.cnblogs.com/pprp/p/9525508.html下载库文件git clone https://github.com/pjreddie/darknetcd darknet修改MakefileGPU=1 #0或1CUDNN=1 #0或1OPENCV=0 #0或1OPENMP=0DEBUG=0编译make编译时候报错:include/darknet.h:16:23: fatal error: cudnn.h: No such _darkenet 环境安装

vue {{}} 数据渲染出现 undefined问题_vue{{}}undefind-程序员宅基地

文章浏览阅读4.4k次。这应该就是数据异步请求导致的问题吧~例如user:{"id":1,"name":"yrm","des":{"sex":"girl" "age":"19"}}{{user.des.sex}} //报错undefined{{user.des ? use..._vue{{}}undefind

python魔法方法学不懂_Python--魔法方法学习-程序员宅基地

文章浏览阅读436次。1、什么叫魔法方法?魔法方法:Python解释器自动给出默认的,是可以给你的类增加魔力的特殊方法。如果你的对象实现(重载)了这些方法中的某一个,那么这个方法就会在特殊的情况下被 Python 所调用(不重载则会使用默认的)。你可以根据需求,重写这些方法去定义自己想要的行为,而这一切都是自动发生的。魔法方法经常是两个下划线包围来命名的(比如__init__,__del__)函数与方法的区别:魔法方法..._python中typeerror:missing 33 required positional arguments

太棒啦!PyCharm与Jupyter完美融合,Jupytext来啦!-程序员宅基地

文章浏览阅读561次。文末送书!项目作者/Marc Wouts转自/机器之心Jupyter Notebook 真的是让人又爱又失望,在有的场景下它极其便利,但是在很多大模型或复杂项目上,它又无能为力。在 Jup..._pyzmq与jupyter兼容

推荐文章

热门文章

相关标签