手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

图解vue 安装和常见问题解决

时间:2024-10-14 05:13:33

本篇经验将和大家介绍vue 安装和常见问题解决,希望对大家的工作和学习有所帮助!

在安装Vue之前需要先安装git和node

1、安装git,按提示安装,完成后把git bash的快捷方式放到桌面,打开后的效果如下图所示:

图解vue 安装和常见问题解决

2、安装node,进入nodejs的官网的下载页面,根据电脑选择安装包,我这里是64位的windows系统,所以我选如下图所示:

图解vue 安装和常见问题解决

3、下载完成后一路next即可完成安装,打开git bash,输入node –v和npm –v,如果能正确输出版本号,则说明安装包安装成功,效果如下图所示:

图解vue 安装和常见问题解决

安装Vue

1、安装npm的淘宝镜像纛独编竿由于npm国内的访问速度很慢,我们一般使用淘宝的镜像,在git bash里面输入剧安颌儿如下代码(注意代码registry后面不要有空格):npm install -g cnpm --registry=https://registry.npm.taobao.org安装完成后会出现如下的代码:(会有点慢,需要等待一会),如下图所示:

图解vue 安装和常见问题解决

2、全局安装vue-clicnpm install -g vue-cli

3、创建项目创建一个基于 webpack 模板的新项目,项目名为my-project,如下图所示:vue init webpack my-project

图解vue 安装和常见问题解决

4、手创建项目的时候,所有选项选择否N,以免代码出现错误,后期进阶到高级的时候可以自己重新创建。出现如上的代码,则说明安散艉九慊装成功,这里只需要按快捷键CTRL+C就可以退出当前页面,进入命令输入界面。上面安装的位置是在,git bash的头部信息上可以看到安装的位置,然后进入到项目的文件夹里面,这里是进入到my-project文件夹,如下图所示:

图解vue 安装和常见问题解决

5、进入项目路径cd my-project 输入ls可以查看当前目录下有哪些文件夹和文件。输入ll –a可以查看当前目录下文件的详细信息。

6、安装运行cnpm install当出现如下代码则说明安装成功,如下图所示:

图解vue 安装和常见问题解决

7、运行我们的项目,这里的代码是加上cnpm的:cnpm run dev安装完成之后允许上面的代码,会显示如下的代码,如下图所示:

图解vue 安装和常见问题解决

8、出现这些代码之后,页面会自动跳转到页面http://localhost:8080/#/,页面如下图所示:

图解vue 安装和常见问题解决

Vue安装中常见错误

1、错误1:提示错误,Error: Cannot find module 'chalk',如下图所示:

图解vue 安装和常见问题解决

2、解决办法:这是因为在执行代码cnpm run dev之前漏掉了关键的一步,即安装项目文件cnpm install,在运行之前先安装项目文件,即可以解决。

© 手抄报圈