vue2项目 vue-cli脚手架的可视化创建以及命令行参数创建

简介: vue2项目 vue-cli脚手架的可视化创建以及命令行参数创建

前提

需要确保node.js还有vue-cli的存在

没有安装node.js可以点击下列教程去安装nvm进而安装node.js

tip:npm是Node.js默认的软件包管理系统,安装完毕node后,会默认安装好npm。

安装完node之后npm install -g @vue/cli

nvm的安装,nvm调节node版本增删查改

1.vue-cli脚手架的可视化创建

(切换到D盘然后创建项目比较好)

(这里教一种快捷方式打开cmd在路径中直接输入cmd然后回车就可以直接打开这个路径下的cmd )

cmd输入 vue ui 打开图形化界面vue项目管理器(在项目创建和配置的过程中cmd不能关)(值得注意的可以去谷歌游览器上下载一个插件devtool游览器插件帮助分析vue.js程序

然后会自动弹出这个页面

图形化创建项目:

点击创建选择路径创建项目记得初始化git仓库(到时候git绑定仓库使用git进行版本管理)

vue2的项目预设选择vue2

然后点击创建之后出现项目的仪表盘

然后安装插件vue-router

点击搜索之后安装以下插件

配置Element-UI:在插件中安装,搜索vue-cli-plugin-element

配置Axios:在依赖中安装,搜索axios(运行依赖)

一些基础的安装完了之后

找到你的文件夹然后用vscode打开

然后就创建好了

运行的时候就是这样子运行

运行之后启动app

然后页面就出来了

打包的话就是在下一栏的bulid运行进行打包

2.命令行参数创建

上下选择回车确定,我这里直接选择了vue2

进入目录然后运行

然后运行后的页面就是

导入element ui

选择全部导入别选按需导入,不然后面你做项目需要一个个导入组件太麻烦了

选择要加载的区域设置(使用箭头键)(作为一个前端 至少得有个nvm用于切换node版本 而不是简单的卸载安装)

如果出现这个问题的话

项目package.json的配置太低,用最新版的node运行不起来

解决方式:

1.安装 node v12.13.1,nvm用于切换node版本

2.再重新拉取项目, 或者删除node_module

导入路由

相关文章
|
1月前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
86 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
29天前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
144 2
|
1月前
|
JavaScript
Vue CLi脚手架创建第一个VUE项目
Vue CLi脚手架创建第一个VUE项目
35 3
|
19天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
5天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
1月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
38 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
22天前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
20 7
|
18天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
21天前
|
资源调度 JavaScript 前端开发
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
21 5
|
22天前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
25 6