如果你只是简单写几个Vue
的Demo程序, 那么你不需要Vue CLI
;如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI
使用Vue.js
开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作,那无以效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。用vue.js开发大型应用需要使用webpack打包工具
来自官网vue-cli
关于旧版本
Vue CLI 的包名称由
vue-cli
改成了@vue/cli
。 如果你已经全局安装了旧版本的vue-cli
(1.x 或 2.x),你需要先通过npm uninstall vue-cli -g
或yarn global remove vue-cli
卸载它。
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-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
的方式初始化项目时不可以的。
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
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".
总结
如果在之后的开发中,你依然使用template,就需要选择
Runtime-Compiler
如果你之后的开发中,使用的是
.vue
文件夹开发,那么可以选择Runtime-only
Runtime-Compiler
和 Runtime-only
为什么存在这样的差异呢?
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-cli 3 与 2 版本有很大区别
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': ''
}
}
}
}
};
箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this
,arguments
,super
或new.target
。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
//相当于:(param1, param2, …, paramN) =>{ return expression; }
// 当只有一个参数时,圆括号是可选的:
(singleParam) => { statements }
singleParam => { statements }
// 没有参数的函数应该写成一对圆括号。
() => { statements }
文章浏览阅读548次,点赞2次,收藏5次。本文简单介绍使用Capture软件复制电路时保持元器件编号保持问号的方法。_cadence中怎么复制电阻时是问号
文章浏览阅读2.3k次,点赞41次,收藏95次。【导语】程序员每日都在和 debug 相伴。新手程序员需要学习的 debug 手段复杂多样,设置断点、查看变量值……一些网站还专门针对debug撰写了新手教程。老司机们在大型的项目中要 debug 的问题不一样,模块众多、代码超长,面对大型项目的debug之路道阻且长。针对新手和老手程序员会遇到的不同debug问题,本文推荐了两个GitHub上的开源debug工具:PySnooper 和 Be..._python 除了用print检查变量
文章浏览阅读401次。安装jdkjdk下载地址.两种下载方式安装包和压缩包,主要介绍安装包但是也介绍压缩包安装包下载打开此文件进入安装界面,由于已经安装,不在详细演示安装分两个步骤JDK安装打开安装程序后 会有安装路径选择,可自行选择位置安装,但是最好文件夹名带jdk,比如jdk1.8.0_231如过自行选择安装路径,则下一步的jre安装也要选择相同路径示例图如下jre安装上述已经说明环境..._挂载jdk.iso并安装jdk
文章浏览阅读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 图纸
文章浏览阅读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 手册
文章浏览阅读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
文章浏览阅读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插件
文章浏览阅读4.2k次。这里简单介绍2个可以直接编译运行C语言的手机APP,分别是C语言编译器和C++编译器,对于大部分简单的程序来说,这2个软件都可以轻松编译并运行,感兴趣的朋友可以尝试一下:01C语言编译器这是一个非常精简的手机C语言编程软件,主要为C语言初学者提供核心的功能,能够随手验证一些小程序,免费、小巧、灵活,下面我简单介绍一下这个软件的安装和使用:1.首先,安装C语言编译器,这个直接在手机应用商店中搜索就行..._有教学c语言的软件吗
文章浏览阅读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 环境安装
文章浏览阅读4.4k次。这应该就是数据异步请求导致的问题吧~例如user:{"id":1,"name":"yrm","des":{"sex":"girl" "age":"19"}}{{user.des.sex}} //报错undefined{{user.des ? use..._vue{{}}undefind
文章浏览阅读436次。1、什么叫魔法方法?魔法方法:Python解释器自动给出默认的,是可以给你的类增加魔力的特殊方法。如果你的对象实现(重载)了这些方法中的某一个,那么这个方法就会在特殊的情况下被 Python 所调用(不重载则会使用默认的)。你可以根据需求,重写这些方法去定义自己想要的行为,而这一切都是自动发生的。魔法方法经常是两个下划线包围来命名的(比如__init__,__del__)函数与方法的区别:魔法方法..._python中typeerror:missing 33 required positional arguments
文章浏览阅读561次。文末送书!项目作者/Marc Wouts转自/机器之心Jupyter Notebook 真的是让人又爱又失望,在有的场景下它极其便利,但是在很多大模型或复杂项目上,它又无能为力。在 Jup..._pyzmq与jupyter兼容