Vue CLI安装的详细步骤
Vue CLI安装的详细步骤为了以后安装方便,写一个具体的步骤。1.首先,打开vue官网,在生态系统的工具里找到Vue CLI,点击安装,先全局安装,直接打开cmd命令,执行以下命令。(我选的第一个)2.执行完成后,再执行这个命令,查看版本。3.如果上面两个都成功了,点击创建一个项目,执行以下命令。如何创建这个项目呢?首先,我们将项目创建在D盘或桌面,然后打开目录,在这个位置敲cmd命令,定位到当
Vue CLI安装的详细步骤
为了以后安装方便,写一个具体的步骤。
1.首先,打开vue官网,在生态系统的工具里找到Vue CLI,点击安装,先全局安装,直接打开cmd命令,执行以下命令。(我选的第一个)
2.执行完成后,再执行这个命令,查看版本。
3.如果上面两个都成功了,点击创建一个项目,执行以下命令。如何创建这个项目呢?首先,我们将项目创建在D盘或桌面,然后打开目录,在这个位置敲cmd命令,定位到当前的目录下。注意,一定不要在其他位置随便创建项目。
4.再执行以下这个命令,vue create hello-world
,hello-word是你创建的项目名,可以自定义,(但是不要使用驼峰命名)点击回车执行命令。
5.会出现以下的命令,第一个是vue2.x版本,第二个是3.x版本,我选择的是第三个,自己选择配置项。(上下键可以选择)
6.会出现下面的命令,空格可以选择哪一行,我选择图片中的四个命令。
7.因为我现在使用的是2.x版本,所以我选择的是2x。
8.下面是CSS预处理器,我选择的是第一个Sass,比较稳定。
9.这个我选择的是第一个:仅仅是报错的时候执行代码。
10.以下命令,第一个是在服务器报错,第二个是在保存时报错。我选择是第一个。
11.配置文件是放在单独文件里还是package.json里,我选的是第一个,放在单独文件里。
12.要不要保存你刚刚的流程,如果选择Yes,下次就不需要一步步按照这个步骤执行,如果不保存,下次还需要一步步来执行这些步骤。我选择的是No,因为下次构建项目不一定需要这么多依赖包。
13.然后执行我画红色横线的命令,因为我的自定义项目名字是proname,所以出现的是cd proname,进入到我刚刚新建的项目proname,再执行一个项目启动命令,也就是第二个画横线的命令,回车。
14,出现端口,将端口复制粘贴到网页就可以出现你的首页。
如果关闭cmd命令,那么这个页面将会报错,那么如何再次打开这个页面呢?首先将项目拉到你的vscode软件里,打开src里的APP.vue,这里可以查看信息,在项目里点击右键,打开集成终端,输入npm run serve回车,会出现这个网站域名,复制到网站就可以访问vue页面了。
更多推荐
所有评论(0)