前言
cli版本号:@vue/cli 4.2.3
JavaScript的强大不必多言。做为一名后端开发工程师,不会前端是不行的,这年头走哪都讲究个全栈么。Angular、React、Vue等js库的出现,彻底颠覆了后端开发对前端的认识。本人最近自学了一些Vue的皮毛,写下这篇博客不是为了哗众取宠,权当是为自己做一个Vue学习笔记。
一、安装或升级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 版本。
-
可以使用下列任一命令安装这个新的Vue CLI包:
npm install -g @vue/cli # OR yarn global add @vue/cli
-
查看版本 vue --version或者vue -V:
二、用vue-cli4图形化方式创建vue项目
- 在命令行工具(推荐Cmder,Windows平台最好用的)中输入命令:vue ui:
vue-cli会自动打开浏览器跳转到Vue项目管理器页面。
-
点击创建项目,选择目录,包管理器我选择的npm,点击下一步。
-
预设这里我选择的手动模式,来手动配置项目,点击下一步。
-
功能界面选择自己需要的功能,我这里选择了Babel,Router,Vuex等等,点击下一步。
-
配置界面,选择ESLint配置模版,这里我习惯用ESLint+Standard config,点击创建项目。
-
点击创建项目后,页面会显示正在创建项目,切换到命令行工具后可以看到正在下载依赖等。
-
将创建完的项目导入编辑器中,执行npm server启动,打开浏览器输入地址即可看到vue页面。
以上。