您的位置:首页 > Web前端 > Vue.js

Vue入门(2)-- vuecli 安装与创建项目(相关问题解决)

2020-03-29 19:42 656 查看

1. vuecli介绍

官网链接:https://cli.vuejs.org/zh/guide/

2.vueCLI 安装

(前提: Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。可查看官方说明)

使用如下命令安装新版本

[code]npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装完成之后输入命令vue -V(注意是大写V)或vue --version,即可查看vuecli版本,此处已经安装4.2.3版本

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

附加,4.2.3版本按照成功勿看

由于新版本的更新修改了命令,我开始安装输入npm install -g vue-cli安装了2.9.6版本

若想要修改nodejs2.x 为高级版本需要先卸载原始版本再重新安装即可,命令为:

[code]npm uninstall -g vue-cli

 

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

3.创建第一个Vue项目

(我在创建的过程中出现了一些问题,也一并收录进来)

1.使用命令行原始创建vue项目,在命令行输入如下代码:

[code]vue create hello(hello为我创建的项目名称)

2.选择相应的选项后下一步(按照自己的需求选择):

3. 开始创建项目

如果正常创建,则会出现如下提示,表示创建成功:

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

但是开始我报错了:以下是错误分析,如果创建成功可以跳过

(1)解决方法 参考链接:https://blog.csdn.net/qq_35457469/article/details/102924524(有两种方法,我尝试了第二种直接用命令清理,在命令行输入:)

[code]npm cache clean --force

之后再进行创建,如果成功即可。

(2)然而我这里问题并没有解决,反而出现了新的错误:

我进行了如下尝试:

1.npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver  没有用

2.以为是版本问题,因此更新了npm的版本,输入npm install -g npm@latest  没有用


3.npm cache clean --force 清除npm的缓存

此时终于有效果了,重新创建first项目,创建成功

参考链接:https://blog.csdn.net/genius_yym/article/details/84645915

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

4.按照提示输入命令运行项目

[code]cd first
npm run serve

看见提示表示运行成功,并且可以在浏览器输入http://localhost:8080/ 看到如下界面,表示已经成功创建一个vue项目

  • 点赞 1
  • 收藏
  • 分享
  • 文章举报
Rachel-cc 发布了11 篇原创文章 · 获赞 3 · 访问量 513 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐