vue-cli创建vue项目

已于 2023-07-22 19:00:26 修改
阅读量153 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端
于 2023-04-12 21:39:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/a79998/article/details/130115720
版权

安装node

下载地址

查看是否已安装
npm -v

安装vue和vue-cli

npm i vue -g
npm i @vue/cli -g
查看是否已安装
vue -V

创建项目

  1. 在要创建的地方打开终端

    在这里插入图片描述

  2. 输入命令： vue create+ 项目名称，回车

    在这里插入图片描述

  3. 选择自主安装

    在这里插入图片描述

  4. 选择特性

    默认如下，按空格（space）进行取消和选择!!!
    在这里插入图片描述
    选择结果如下，回车（enter）
    在这里插入图片描述
    解释几个常见的特性

    - Babel #转译工具
- Router #路由工具
- Vuex #状态管理工具
- CSS Pre-processors #CSS 预处理器
- Linter / Formatter #代码格式校验，新手不建议选

  5. 选择vue版本,这里选择vue2x版本

    在这里插入图片描述

  6. 选择路由模式,这里输入n

    在这里插入图片描述

  7. 选择css预编译，一般选择less，容易入手

    在这里插入图片描述

  8. 选择配置文件存放方式,这里选择单独存放

    在这里插入图片描述

  9. 是否保存为预设,输入y之会保存当前的配置，下次创建项目时可快速创建，这里我们输入N，不保存

    在这里插入图片描述
    回车，开始创建
    在这里插入图片描述
    创建完毕
    在这里插入图片描述

  10. cd+创建的项目名称进入项目中，运行npm run sever运行项目

    运行成功
    在这里插入图片描述
    复制地址，在浏览器中输入，运行成功
    在这里插入图片描述
    项目结构
    在这里插入图片描述

补充

  1. vue-router vuex 版本

    在vue2项目中，如果需手动安装vue-router vuex,应注意：
    vue-router最新版本4适用于vue3，所以vue2项目中应安装版本3

    npm i vue-router@3

    vuex最新版本4适用于vue3，所以vue2项目中应安装版本3

    npm i vue@3

  2. nvm,管理node版本的工具

    下载地址
    在这里插入图片描述

vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
在你的 vue-cli 创建的项目中安装插件，如果没有请参考 vue add multiple-page 命令 以下是此插件的 3 个命令： init-config : 初始化vue.config.js & Views.json两个文件到你的项目 build-multi : 并行构建多个...
vue-cli-plugin-vite：与vue-cli一起使用Vite Today
03-04
无需任何代码库修改即可直接使用的vue-cli项目。 目录 用法 vue add vite 插件的生成器将为相应的main。{js，ts}编写一些main.html ，因为vite需要html文件作为dev-server条目文件 动机 我们有很多现有的vue-cli...
Vue：快速创建Vue项目
最新发布
jet5devil的博客
02-11 369
快速创建vue，学习vue。
Vue实战：使用CLI构建Vue项目
howard2005的专栏
11-08 2741
本教程手把手演示了通过Vue CLI创建Vue项目，涵盖环境配置、命令行与IDEA工具构建项目、组件添加及路由配置。展示了从初始化到新增页面的完整流程，体现了Vue CLI在简化前端开发工作流上的高效性。
基础知识与安装过程：使用 Vue CLI 创建 Vue.js 项目
(黎子)人生编码
06-27 1118
Vue CLI 是一个基于 Vue.js 的命令行工具，用于快速搭建 Vue.js 项目。它提供了一套图形化界面，允许开发者通过简单的指令来生成和管理 Vue 项目。Vue CLI 支持创建单文件组件（SFCs）、使用预设配置或自定义配置，并且可以集成各种插件和预设。
Vue CLI创建Vue项目详细步骤
mingfeng4923的博客
08-17 5744
通过这些步骤，您已经成功地使用Vue CLI创建了一个新的Vue项目，根据项目需求进行了相应的配置。这里的意思是问你本次项目是否采用history模式，如果选择Y,需要后台配置具体看vueRouter官网解释，这里我门选择 n。这里是问你是否记录这次配置选择，选择之后会让你为这次配置起一个名字，这样下次可以直接快速配置选择，最后回车后就会初始化项目了。这里的意思是问你选择哪一种CSS预处理语言，我的项目中一般使用的是SCSS我选择第一个。创建过程中，您将进入一个交互式的选择界面，根据您的需求进行配置。
Vue使用vue-cli创建项目
01-19
本文介绍了Vue使用vue-cli创建项目，分享给大家，具体如下： vue-cli 是一个官方发布vueJS项目脚手架：https://github.com/vuejs/vue-cli 我创建的模板项目：...
vue-cli系列之vue-cli-service整体架构浅析
12-07
vue启动一个项目的时候，需要执行npm run serve，其中这个serve的内容就是vue-cli-service serve。可见，项目的启动关键是这个vue-cli-service与它的参数serve。接下来我们一起看看service中主要写了什么东东（主要...
vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目
05-11
Vue CLI插件可将vue-i18n添加到您的Vue项目 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠赞助商的支持。 如果您想成为赞助商，请考虑： ...
Vue-Cli搭建Vue项目及使用
2301_78158568的博客
07-16 1135
cli: Command Line 命令行工具，vue-cli就是vue的命令行工具，也称之为脚手架，使用vue-cli提供的各种命令可以拉取、创建、运行我们需要使用到的框架，比如webpack、Element UI、Element Admin等等。那么要想使用vue-cli命令，需要先安装node.js。node.js提供了前端程序的运行环境，可以把node.js理解成是运行前端程序的服务器。解决方案: 以管理员身份启动idea,打开项目运行。
使用Vue Cli快速构建项目
m0_61016102的博客
12-23 1117
Vue CLI 是 Vue.js 官方推出的命令行工具，用于快速创建和管理 Vue.js 项目。它通过交互式脚手架帮助开发者自动配置项目，支持现代化的开发工具链、插件系统、开发服务器等功能。使用 Vue CLI 可以轻松创建 Vue 项目，选择所需的功能（如 TypeScript、Vue Router、Vuex 等），并支持热重载、单元测试等。通过 vue create 命令可以初始化项目，vue add 安装插件，npm run serve 启动开发服务器，npm run build 打包生产环境代码。V
史上最详细cli创建vue项目步骤，创建vue项目，vue使用cli创建项目，创建vue3项目
imkaifan的博客
12-14 886
史上最详细cli创建vue项目步骤，创建vue项目，vue使用cli创建项目，创建vue3项目
手把手教你使用Vue CLI搭建项目
书山有路
07-28 1660
我们实际在开发项目的时候一般不会选择向官网那样直接在html文件中引入vue，而是用vue的脚手架去搭建项目。脚手架完成了项目的编译，打包，压缩，配置，我们无需自己在手动编写webpack位置，直接使用相关的命令即可完成，真可谓是事半功倍。 一、想使用Vue脚手架需要先安装Node 环境。 在浏览器输入http://nodejs.cn/进入node官网，点击下载，可以看到node有各种系...
Vue-cli（基于cli如何创建项目）最详细教程，手把手教学
分享java学习路上的一些笔记，不足之处多多见谅。
06-14 5669
Vue-cli（基于cli如何创建项目）最详细教程，手把手教学
五分钟教你使用vue-cli3创建项目（三种创建方式，小白入门必看）
道阻且长，行则将至。
09-14 1万+
五分钟教你使用vue-cli3创建项目（小白入门必看） 一、搭建vue环境 安装Nodejs 官网下载Nodejs，如果希望稳定的开发环境则下LTS(Long Time Support)长期支持版，稳定。 点我进入node官网 安装好后cmd输入node -v查询是否安装成功，如下出现版本号即为成功。 二、Vue脚手架工具 全局安装vue-cli，命令行中输入： npm install --g vue-cli 国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝镜像或者yarn 淘宝镜像的安装
如何搭建一个vue项目(完整步骤)
热门推荐
y2020520的博客
05-16 3万+
Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；最后附上demo地址：https://github.com/yanxulan/vue-demo.git。参考：https://www.cnblogs.com/yanxulan/p/8978732.html。d：输入ip： http://localhost:8010/#/first，查看页面效果。
从零开始新建一个vue项目
m0_71439861的博客
12-15 2172
要创建一个Vue项目，您可以使用Vue CLI（命令行界面）或Vite（新一代前端构建工具）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值