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

导入路由

相关文章
|
12天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
26 3
|
12天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
24 3
|
11天前
|
JSON JavaScript 前端开发
在Vue3项目中,Vite起到的作用及其可以做的事情
Vite是Vue 3项目的关键快速开发服务器和高效的热模块替换(HMR)。它的亮点包括:使用ES模块实现快速启动和动态加载,模块级别HMR提升开发效率,Rollup打包优化生产构建。此外,Vite还支持插件系统、自定义配置、静态资源处理和现代JS特性。通过`npm create vite`可快速搭建Vue项目,配置文件`vite.config.js`可定制行为,`.env`文件管理环境变量。Vite优化了开发与构建流程,提高开发者效率并保证构建性能。
|
10天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
71 7
使用 Vue CLI 脚手架生成 Vue 项目
|
14天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报系统的设计与实现附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报系统的设计与实现附带文章源码部署视频讲解等
38 12
|
8天前
|
资源调度 JavaScript 前端开发
vite+vue3+ts从0到1搭建企业级项目(2)
vite+vue3+ts从0到1搭建企业级项目
24 1
|
11天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
14 1
|
13天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
26 2
|
13天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
42 2
|
13天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
17 2