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

1. vuecli介绍

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

2.vueCLI 安装

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

使用如下命令安装新版本

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 为高级版本需要先卸载原始版本再重新安装即可,命令为:

npm uninstall -g vue-cli

 

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

3.创建第一个Vue项目

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

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

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

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

3. 开始创建项目

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

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

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

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

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.按照提示输入命令运行项目

cd first 
npm run serve

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

发布了26 篇原创文章 · 获赞 6 · 访问量 1400

猜你喜欢

转载自blog.csdn.net/Sabrina_cc/article/details/104805561
今日推荐