vue-cli4脚手架搭建

最新推荐文章于 2022-04-30 18:22:27 发布
最新推荐文章于 2022-04-30 18:22:27 发布
阅读量114 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sweet_cookie/article/details/115463610
版权

vue-cli4脚手架搭建

  1. 安装node.js

  2. 安装npm或cnpm
    这里不介绍如何安装1、2，直接讲到安装vue-cli
    检查是否安装成功：node -v

  3. 安装vue-cli脚手架 （在目标文件夹下操作）
    npm i -g @vue/cli
    在目标文件夹下操作
    检查版本：vue -V

如果你想指定版本安装：npm install -g vue-cli@版本号

  1. 搭建项目
  • vue create vue-demo vue-demo是项目名，自取
    在这里插入图片描述在这里插入图片描述
  • 我这里选择的手动配置
  1. 手动配置features

  • 上下键移动，空格选择或取消插件
    在这里插入图片描述

  • 选择以后回车
    在这里插入图片描述
    常用选择：
    在这里插入图片描述
    如果你想选择ts书写代码，选择typescript
    如果选择features选择错误，Ctrl+c重新created 项目

  • 选择插件结束的操作在这里插入图片描述在这里插入图片描述

  • 一般不会保存为将来项目的预设，选择n，有需要选y
    在这里插入图片描述
    在这里插入图片描述

  1. 启动项目

涉及npm还是yarn，具体看项目搭建后的following commands

  • cd 项目 //进入项目
  • npm：npm run serve
    yarn: yarn serve
    如果不会yarn操作的小伙伴，建议对比npm学一下，会很快学会的
  • 成功之后
    在这里插入图片描述
sweet_doris
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli3.0 脚手架搭建项目的过程详解
10-17
主要介绍了vue-cli3.0 脚手架搭建项目的过程，本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
安装vue后，显示vue 不是内部或外部命令
weixin_45783039的博客
10-25 2365
安装vue，显示vue不是内部或外部命令
vue ui没反应及npm i -g @vue/cli报错问题完美解决！
cylemon的博客
05-18 3956
1.起因 命令行需使用vue ui，但该命令无效。因为没有ui组件。 2.npm i -g @vue/cli报错 经查询，需要通过npm i -g @vue/cli安装ui组件。但该命令执行过程中报错。 3.分析 看报错原因，应该是安装目录已存在同名文件。提示移除已存在的文件或者重试（已重试多次无效），或者命令行中带 --force 去覆盖已有文件。显然覆盖是比较方便稳妥的，万一删错了。。 npm ERR! Remove the existing file and try again,
Node.js介绍与安装教程
偷懒的肥猫
09-30 404
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型
Vue-cli4脚手架搭建项目
PURSUE__LIFE的博客
04-30 1541
目录 一、安装node.js 二、安装 cnmp、yarn 问题（在此系统上禁止运行脚本） 解决方法 三、安装vue-cli脚手架构建工具 四、创建项目 一、安装node.js node.js官网下载 此前我是有下载过node.js的，但在搭建项目的过程中，因为node.js的版本太低 不适配因而报错 解决方法： 在官网上从新下载一个符合版本的node.js，并放在原来node.js存放的路径上。这样就可以避免重新配置环境变量了。 在下载新的版本的node时，默认..
vue-cli使用js-cookie
u012559485的博客
04-29 383
vue-cli使用js-cookie安装使用1.存到Cookie去2.在Cookie中取出3.删除 安装 npm install js-cookie --save 使用 import Cookies from ‘js-cookie’ 1.存到Cookie去 Cookies.set(‘name’, ‘value’); Cookies.set(‘name’, ‘value’, { expires: 7...
从0搭建vue-cli4脚手架
11-20
之前写了两期前后端分离的SpringBoot项目，从0搭建到整合Mybatis，但是只有后端没有前端的项目是不完整的，所以今天更新一篇从0搭建vue-cli4脚手架。 准备工作，有点类似java的jdk 安装node.js 直接去官网下载就可以...
Vue-cli脚手架搭建
01-08
Vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板 一、官方文档 Vue-cli 二、事先安装 得安装node.js和npm 查看版本node -v npm -v 更新至最新版本 npm install -g node npm install -g npm 三、...
vue-cli项目 使用 js-cookie
成茂峰
09-17 2175
js-cookie github地址 https://github.com/js-cookie/js-cookie 使用方式 npm install js-cookie --save 引入js-cookie import Cookies from 'js-cookie' 使用js-cookie 获取cookie对应的值 import Cookies from 'js-cookie' // 获取...
@vue/cli 4.x 安装
u011700186的博客
05-14 139
安装环境 MacOS 10.15.4 Node.jsv12.16.3 npm6.14.4 @vue/cli 4.3.1 安装准备 官方参考文档： https://cli.vuejs.org/guide/installation.html 安装步骤 1、使用如下命令进行安装即可 npm install -g @vue/cli # OR npm i -g @vue/cli...
vue-cli-plugin-cookie：:cookie:Vue CLI 34插件，用于处理浏览器cookie
02-17
vue-cli-plugin-cookie :cookie: Vue CLI 3/4插件，用于处理浏览器cookie 安装 使用vue-cli或vue-cli UI添加cookie插件。 import和.use()将自动添加到main.js中 vue add cookie 用法示例 获取一个cookie this . $cookie . get ( 'jwt_token' ) 设置一个cookie this . $cookie . set ( 'jwt_token' , 'cookie_data' ) this . $cookie . set ( 'jwt_token' , 'cookie_data' , { sameSite : 'Lax' , expires : '1Y' } ) // set SameSite to Lax, Expires to 1 year this . $cookie
vue 自定义cookie方法
Young_Gao的博客
05-14 1176
在main.js中写/* 自定义cookie相关方法 */Vue.prototype.setCookie=function(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000); var expires = "expires=" + d.toUTCS...
vue-cli本地环境API代理设置和解决跨域
weixin_33882452的博客
09-04 487
前言 我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了，通常我们的请求地址是以localhost:8080来请求接口数据的，localhost是没有办法设置cookie的。 我们可以在vue-cli配置文件里面设置一个代理，跨域的方法有很多，通常需要后台来进行配置。我们可以直接通过node.js代理服务器...
v-cli.流程及常见的一些问题
thinkingw770s的博客
08-20 2076
vue-cli（vue脚手架）超详细教程       都说Vue2简单上手容易，的确，看了官方文档确实觉得上手很快，除了ES6语法和webpack的配置让你感到陌生，重要的是思路的变换，以前用jq随便拿全局变量和修改dom的锤子不能用了，vue只用关心数据本身，不用再频繁繁琐的操作dom，注册事件、监听事件、取消事件。。。。（确实很烦）。vue的官方文档还是不错的，由浅到深，如果不使用构建工具确...
Vue-CLI项目-vue-cookie与vue-cookies处理cookie
qq_15058285的博客
10-14 1061
** vue-cookie ** 一.模块的安装 npm install vue-cookie --save #--save可以不用写。 二.配置main.js **// 配置cookie** import cookie from 'vue-cookie' Vue.prototype.$cookie = cookie; //配置时候prototype.$这里的名字自己定义不是固定是cookie...
vue-cli 版本 4.5.4 脚手架搭建项目
lss0555的博客
08-19 2364
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
VUE 脚手架 cli4 npm install -g @vue/cli 安装报错 常见踩坑
JsonYuer的博客
06-20 7153
VUE脚手架安装踩坑 全局模式下npm install -g @vue/cli可能出现的错误 如果报出npm不是内部命令的话，证明没有安装node.js需要在nodejs的官网去下载它 用vue -V查看vue的版本时报错，此时要注意后面的V是大写 如果错误的提示为 ERR：path：‘某个文件的路径’，说明在安装这个脚手架之前，有其他跟这个脚手架有关的东西被安装了；只需要将path下面指定的文件删掉重新安装即可 例如以下错误 解决方法用管理员身份打开cmd，输入命令npm clean cache –for
安装脚手架错误的解决方法
bubbleSweet的博客
07-09 695
方法1： npm insatll -g @vue/cli（这里把-g放在中间） 方法2： npm clean cache -force（清空这个文件夹） npm insatll -g @vue/cli（再进行安装即可） 方法3： 重装node
vue-cli4脚手架搭建实战教程
学亮编程手记
09-20 1150
安装nodejs vue需要通过webpack打包，而webpack是基于node的，所以要先安装nodejs环境。 #安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org #验证cnpm是否安装成功 cnpm -v 安装yarn（可选） #安装facebook的yarn包管理工具（取代npm） npm install yarn 安装vue-cli 验证vue-cli是否已安装 安装vue-cli命令 $
mac使用vue-cli创建脚手架
最新发布
07-15
### 回答1： 使用vue-cli在Mac上创建脚手架的步骤如下： 首先，确保你的机器已经安装了Node.js和npm。你可以在终端中输入以下命令来检查是否已正确安装： $ node -v $ npm -v 如果没有安装，请先安装Node.js和npm。 安装vue-cli，可以使用以下命令： $ npm install -g @vue/cli 安装完成后，你就可以使用vue命令来创建Vue项目了。进入你要创建项目的文件夹，例如，你的项目名为"my-project"，那么你可以在终端中输入以下命令： $ vue create my-project 然后，会提示你选择一些配置项，如babel、Router、Vuex等等。你可以根据需要进行选择，也可以直接按回车键来选择默认配置。 等待一段时间后，Vue脚手架会自动创建并安装所需的文件和依赖项。安装完成后，进入项目文件夹： $ cd my-project 然后，运行以下命令来启动开发服务器： $ npm run serve 在浏览器中打开 http://localhost:8080 就可以看到项目的欢迎界面了。 接下来，你可以根据自己的需求在src目录下进行开发，并使用Vue的语法和组件来构建应用程序。 需要注意的是，vue-cli提供了很多其他命令和功能，如构建生产版本的项目、进行单元测试等等。你可以在官方文档中查找更多相关信息。 以上就是在Mac上使用vue-cli创建脚手架的简单步骤。希望对你有所帮助！ ### 回答2： 在Mac上使用Vue CLI创建脚手架是一种非常方便和快速的方式，下面我会详细说明步骤。 首先，在你的Mac上确保已经安装了Node.js和npm。你可以在终端中输入`node -v`和`npm -v`来检查是否已经安装。如果没有安装，请先安装这两个软件。 接下来，打开终端，并全局安装Vue CLI。在终端中输入以下命令： ``` npm install -g @vue/cli ``` 这样就完成了Vue CLI的安装。 然后，你可以使用以下命令来创建一个新的Vue项目： ``` vue create 项目名 ``` 在这个命令中，你可以替换“项目名”为你自己的项目名称。执行命令后，Vue CLI会为你创建一个新的项目，并自动安装项目所需的所有依赖。 在项目创建完毕后，你可以使用以下命令进入到项目目录中： ``` cd 项目名 ``` 在进入到项目目录后，你可以使用以下命令来启动项目： ``` npm run serve ``` 这样，你就可以在浏览器中访问`http://localhost:8080`来查看你的Vue项目了。 除了创建项目和启动项目，Vue CLI还提供了其他一些有用的命令来帮助你开发和打包项目。例如，你可以使用以下命令来添加新的Vue组件： ``` vue add 组件名 ``` 总结起来，使用Vue CLI在Mac上创建Vue项目非常简单。只需要几个简单的命令，你就可以快速搭建起一个完整的Vue开发环境，方便你开发和管理Vue项目。 ### 回答3： Mac使用vue-cli创建脚手架非常简单。首先，您需要确保您的Mac上已经安装了Node.js和npm。您可以在终端中运行“node -v”和“npm -v”命令来检查它们的版本。 一旦您确认安装了Node.js和npm，您可以使用以下命令全局安装vue-cli： ``` npm install -g @vue/cli ``` 安装完成后，您可以使用以下命令来创建一个新的Vue项目： ``` vue create 项目名称 ``` 如果您希望使用更详细的配置，可以添加“-p”或“--preset”参数并选择一个预设选项。您可以通过运行以下命令来查看可用的预设选项： ``` vue create --preset ``` 一旦您选择了预设选项并输入了项目名称，vue-cli将会下载并安装项目的所有依赖项。这可能需要一些时间，具体取决于您的网络连接和计算机性能。 完成后，您可以使用以下命令进入项目目录： ``` cd 项目名称 ``` 然后，您可以使用以下命令来启动开发服务器： ``` npm run serve ``` 这将启动一个本地服务器，您可以在浏览器中访问项目。默认情况下，服务器将在“http://localhost:8080”上运行。 这只是使用vue-cli创建脚手架的基本过程。您可以通过编辑项目中的源代码以及添加其他插件和库来进一步定制您的Vue项目。祝您使用vue-cli创建出优秀的Vue项目！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值