Vue CLI 安装和创建 Vuetify 项目

最新推荐文章于 2024-09-11 14:57:03 发布
最新推荐文章于 2024-09-11 14:57:03 发布
阅读量589 收藏 2
点赞数
分类专栏： web开发 文章标签： vue.js npm javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46703850/article/details/121027691
版权
本文详细介绍了如何安装npm，接着讲解Vue CLI的安装步骤，然后通过Vue CLI创建Vue.js项目，并最终指导如何在项目中运行Vuetify，帮助读者快速上手Vue与Vuetify的结合应用。
摘要由CSDN通过智能技术生成

1.安装npm

npm:是 nodejs 下的包管理器。所以需要安装 nodejs
windows安装npm教程–nodejs

2.安装 Vue 脚手架

Vue CLI安装

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

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

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

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

 $ vue --version

在这里插入图片描述

3.使用Vue CLI创建Vue.js的项目

 $ vue create vue-project

最低0.47元/天 解锁文章
一个平凡de人
关注
专栏目录
使用vue-cli创建vue项目
qq_44089679的博客
05-18 1062
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、安装nodejs环境？二、安装vue-cli使用npm创建vue2或vue3项目：使用cnpm创建vue2项目：一、使用vue-cli来创建一个基于 webpack 模板的新项目 前言 提示：这里可以添加本文要记录的大概内容： 例如：记录初次使用vue-cli创建项目时遇到的报错，和成功搭建的整体流程。 提示：以下是本篇文章正文内容，下面案例可供参考 一、安装nodejs环境？ 打开cmd输入：node -v 和npm.
Vue UI方式安装和创建 Vuetify 项目
weixin_46703850的博客
10-16 881
Vuetify Vue UI方式安装和创建项目
vue-cli创建vuetify项目
寂寥人生
06-07 113
y 选择推荐的回车
使用Vuetify构建优雅的Vue.js应用
上进！努力！！！
08-30 955
Vuetify 是一个非常强大的工具，它不仅可以帮助你快速开发符合Material Design规范的Vue应用，还提供了丰富的自定义选项，满足不同的项目需求。希望本文能够帮助你更好地理解和使用Vuetify。
vue-cli创建vue项目
m0_63057114的博客
03-16 275
1.首先检查一下是否安装了vue以及vue-cli，2.安装vue以及vue-cli，3.用脚手架（vue-cli）vue-cli创建项目...
vuetify安装
dailittledragon的博客
08-11 247
vuetify
vue-cli-plugins::electric_plug:适用于Vue CLI的Vuetify插件集合
04-27
一个Vue CLI插件，用于安装和配置Vuetify 预设值 预设值 版本 学习 vue-cli-plugin-vuetify-preset-basil 罗勒材料研究 vue-cli-plugin-vuetify-preset-crane 起重机材料研究 vue-cli-plugin-vuetify预置-每两周...
VueCli PWA + Vuetify 项目创建指南
PHANTOM
05-28 624
随着Vuejs的快速发展和Vuejs相关生态系统的完善，构建一个VueCli工程应用已经相对容易。本文主要介绍了使用VueCli脚手架，结合vuetify UI框架创建和配置一个完整的PWA应用。
vue-cli-plugin-modular-vuex:为Vue CLI 3插件创建模块化Vuex存储
05-19
使用vue-cli 3.0生成项目 vue create my-app 在安装模块化vuex插件之前，请确保提交或存储所做的更改，以防您需要还原 要安装模块化vuex插件... cd my-app vue add vuex // if you haven't selected to add vuex...
vue+vuetify项目
qq_37899622的博客
10-18 1254
①安装vuetify npm install vuetify ②在main.js引入 import Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css' Vue.use(Vuetify) vuetify: new Vuetify(), ③在index.html中引入字体和图标 <!-- Fonts and icons --> <link rel="stylesheet" href="https://fonts.g
前端项目-vuetify.zip
09-02
前端项目-vuetify,Vue.js 2语义组件框架
vuetify-template:基于vuetify搭建开箱即用pc端模板项目，集成项目开发常用功能，可以快速拉起项目开发
05-27
vuetify-template Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Compiles and minifies for staging yarn staging Dependency Analysis Report yarn report Run your unit tests yarn test:unit Lints and fixes files yarn lint Customize configuration See . Material Design Icons Project Structure ├── mock #
vue-vuetify-dashboard:使用Vue + Firebase的项目管理仪表板
03-22
vue-vuetify-todo 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。 火力基地的结构 集合-'项目' 集合-“团队”
vue3-vuetify-template:vue3，vuetify-next，模板
03-25
vue3-vuetify模板 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
vue-vuetify-electron 项目,源码在GitHub 希望对大家有所帮助
dibr63585的博客
03-08 304
点击进入 github项目地址 转载于:https://www.cnblogs.com/xxxxue/p/11153594.html
Vue CLI创建Vue项目详细步骤
mingfeng4923的博客
08-17 5145
通过这些步骤，您已经成功地使用Vue CLI创建了一个新的Vue项目，根据项目需求进行了相应的配置。这里的意思是问你本次项目是否采用history模式，如果选择Y,需要后台配置具体看vueRouter官网解释，这里我门选择 n。这里是问你是否记录这次配置选择，选择之后会让你为这次配置起一个名字，这样下次可以直接快速配置选择，最后回车后就会初始化项目了。这里的意思是问你选择哪一种CSS预处理语言，我的项目中一般使用的是SCSS我选择第一个。创建过程中，您将进入一个交互式的选择界面，根据您的需求进行配置。
VUE基础大结局-用vue-cli搭建一个简单的vue项目吧！
hh_xi的博客
09-11 1014
vue-cli是vue官方提供的、快速生成vue工程化项目的工具vue-cli官网 https://cli.vuejs.org/zh/
【vue-cli搭建vue项目的过程2.x】
qq_23128255的博客
05-21 424
搭建vue项目、eslint代码规范
vue/cli创建登录注册界面和公告栏
最新发布
10-24
Vue CLI是一个基于Vue.js的脚手架工具，它可以帮助快速搭建Vue应用。创建登录注册界面和公告栏的主要步骤如下： 1. **创建项目**: 使用`vue create my-app`命令初始化一个新的Vue项目。 2. **安装所需组件库**: 如果需要现成的UI组件，可以使用Element UI、Vuetify等库，或者通过npm安装vue-router (用于页面路由) 和 vuex (状态管理)。 ```bash npm install element-ui vue-router vuex --save ``` 3. **配置router**: 在`src/router/index.js`文件中设置路由规则，例如为登录注册创建"/login"和"/register"路径。 4. **设计登录注册组件**: - 创建`views/Login.vue`和`views/Register.vue`组件，分别展示登录表单和注册表单。 - 在模板部分使用HTML结构，结合Element UI或自定义样式构建登录和注册界面。 5. **状态管理vuex**: - 在`store`目录下创建`actions`, `mutations`和`state`，处理用户认证的状态变化。 6. **路由守卫**: - 使用`beforeEach`守卫，在每次导航时检查用户是否已登录，未登录时重定向到登录页。 7. **公告栏组件**: - 创建`components/Announcement.vue`，显示动态消息或者静态公告。 - 可以从服务器获取数据，或者使用vuex存储临时消息。 8. **在主组件App.vue中引入并使用这两个组件**: - 路由跳转时，使用`<router-view>`标签将登录、注册和公告栏组件渲染到适当的位置。 完成以上步骤后，你就有了基本的登录注册界面和公告栏功能。记得在实际项目中添加相应的CSS样式，并优化用户体验。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值