如何安装vuecli(如何安装vue)

今天给各位分享如何安装vuecli的知识,其中也会对如何安装vue进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

本文目录一览:

局部安装并使用vue-cli(或者其他npm包)

局部安装并使用vue-cli(或者其他npm包)

新建目录:mkdir vue-cli2

切换目录:cd vue-cli2

初始化项目:npm init -y

安装:npm i vue-cli

查看版本:npx vue -V

使用:npx vue init webpack project

补充:

安装vue-cli3.x:npm i @vue/cli@3

使用:npx vue create project

vue-cli全局安装:npm install vue-cli -g

vue-cli的版本查看:vue -V

vue-cli的3.0+以后使用的不是vue-cli了,如果用以上的安装命令安装的并不是最新版的3.0+的,而如果安装3.0的话就需要使用新的:

npm install @vue/cli -g

如果原来已经安装了vue-cli的话需要先卸载原来的安装:

npm uninstall vue-cli -g

vue-cli起项目步骤

一、 安装 node.js

安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功。

二、安装webpack

             命令:npm install webpack -g

             安装完成后使用webpack -v,如果出现相应的版本号,则说明安装成功。

三、安装 vue-cli

             命令:npm install -g vue-cli

             安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功。

             如果提示无法识别 vue,可能是 npm 版本过低,可使用 npm install -g npm 来更新版本

四、使用vue-cli来构建项目

1、在硬盘中找一个放项目的文件夹

2、在文件夹下打开命令盘,输入命令

Vue-Project是我们自己设置的项目名称,项目名称不能用中文

       命令:vue init webpack Vue-Project

3、进入项目工程目录

4、安装项目所需依赖  npm install

5、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource

        命令:npm install vue-router vue-resource --save

创建完成的项目目录,如下图

各个目录的作用

最后一步启动项目

         命令:npm run dev

启动成功,打开浏览器8080窗口,页面如图所示

关于vue create 和vue init webpack的区别 ?

vue create 是vue-cli3.x的初始化方式,目前模板是固定的,模板选项可自由配置,创建出来的是vue-cli3的项目,与cue-cli2项目结构不同,配置方法不同,具体配置方法参考官方文档 网页链接 。vue init 是vue-cli2.x的初始化方式,可以使用github上面的一些模板来初始化项目,webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下,老项目的src目录覆盖3.x的src目录(如果修改了配置,可以查看文档,用cli3的方法进行配置)

另一种:

Vue CLI内网安装(禁止运行vue指令解决方案)

1、Vue cli简介:

Vue cli是一个基于Vue.js 进行快速开发的完整系统,Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。

cli(@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue命令。它可以通过vue create快速搭建一个新项目,或者直接通过vue serve构建新想法的原型。你也可以通过vue ui通过一套图形化界面管理你的所有项目。

2、 Vue cli安装

npm install -g @vue/cli

安装之后,运行vue指令,遇到以下问题:由于公司内网执行策略限制,会禁止运行vue指令。

解决方案及步骤如下:

第一步:执行Set-ExecutionPolicy RemoteSigned更改执行策略。

第二步:如果没有权限更改全局的执行策略,加上-Scope CurrentUser后再次更改(Set-ExecutionPolicy RemoteSigned -Scope CurrentUser),并为ExecutionPolicy参数提供值为:RemoteSigned。

第三步:执行策略更改完成后,成功运行vue指令。

同时安装Vue CLI2和Vue CLI3的方法

如果你想体验Vue CLI3的简洁清爽,又偶尔需要使用Vue CLI2,那这篇帖子就是你需要的。

配置方法改进于 同一台电脑 实现 vue-cli2和vue-cli3同时并存

原方法使用了直接修改文件名的方式,不够美观,破坏式的,改进后为透传调用。

在 vue-cli\bin 下创建如下文件:

添加环境变量 VUE_CLI_HOME ,值为 vue-cli 的路径,这里就是 C:\Program Files\nodejs\vue-cli

在环境变量 Path 中添加一条 %VUE_CLI_HOME%\bin

Win7 是在 Path 的最前面追加 %VUE_CLI_HOME%\bin;

修改完成后,重启命令行即可, PowerShell 可能需要重启系统才好用

在 ~/.bashrc ( 当前用户 )或者 /etc/profile ( 所有用户 )中增加:

保存之后, source ~/.bashrc 或 source /etc/profile 重新加载修改的文件即可

任意位置,执行 vue2 或者 vue3 即可,分别对应 Vue CLI2 和 Vue CLI3

执行 npm cache clean --force 后再次创建,成功,应该是以前的缓存

在 vue-cli\vue2 或 vue-cli\vue3 下重新执行 cnpm install -D xxx 即可

如何安装vuecli(如何安装vue),如何安装vuecli,信息,模板,浏览器,第1张

mac 无法安装vue-cli

在网上查的,是因为os版本过高的问题。安装 npm install -g @vue/cli 时会出现这个问题

解决办法:

在终端输入这个命令

然后再运行 npm install -g @vue/cli 就可以正常安装了。

终端输入vue,发现未找到,command not find:vue

这个问题应该是环境变量没配置,配置一下环境变量

就算上面安装了@vue/cli,这个vue-cli也是要安装的

安装后是这样的

如何安装vuecli的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于如何安装vue、如何安装vuecli的信息别忘了在本站进行查找喔。


【免责声明】:

本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

【关于转载】:

本站尊重互联网版权体系,本站部分图片、文章大部分转载于互联网、所有内容不代表本站观点、不对文章中的任何观点负责、转载的目的只用于给网民提供信息阅读,无任何商业用途,所有内容版权归原作者所有
如本站(文章、内容、图片、视频)任何资料有侵权,先说声抱歉;麻烦您请联系请后台提交工单,我们会立即删除、维护您的权益。非常感谢您的理解。

【附】:

二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

注:本站资源来自网络转载,版权归原作者和公司所有,如果有侵犯到您的权益,请第一时间联系我们处理!

-----------------------------------------------------------------------------------------------------------

【版权声明】:

一、本站致力于为源码爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、如有内容侵犯您的版权或其他利益的,请编辑邮件并加以说明发送到站长邮箱。站长会进行审查之后,情况属实的会在三个工作日内为您删除。
-----------------------------------------------------------------------------------------------------------


内容投诉
源码村资源网 » 如何安装vuecli(如何安装vue)

1 评论

您需要 登录账户 后才能发表评论

发表评论

欢迎 访客 发表评论