1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 图文并茂——从零开始使用Webstorm创建vue.js项目

图文并茂——从零开始使用Webstorm创建vue.js项目

时间:2019-10-02 16:17:34

相关推荐

图文并茂——从零开始使用Webstorm创建vue.js项目

目录

1)安装node.js

2)创建node_global和node_cache文件夹

3)配置NODE_PATH环境变量

4)安装taobao镜像

5)安装webpack

6)全局安装vue脚手架vue-cli

7)使用Webstorm创建vue.js项目(默认项目,下面会介绍自定义创建项目)

8)使用vue-cli自定义创建项目

1)安装node.js

进入官网,下载推荐给大部分用户的版本,完成之后执行安装,选择安装目录之后一直next就行,不需要其他操作.

介于之后配置路径的易读性和方便读者对照,这里是笔者安装路径:H:\DevelopeSoft\NodeJsDown

安装好之后,运行cmd命令行,输入node -v来验证安装是否正确(出现版本号即正确),最新版本的安装,系统会自动配置系统环境变量,所以不需要用户自己手动配置node.js的环境变量

2)创建node_global和node_cache文件夹

在node.js安装路径下创建node_global和node_cache文件夹,创建之后运行下面两个命令

npm config set prefix “d:\nodejs\node_global”

npm config set cache “d:\nodejs\node_cache”

之后运行npm命令下载express

npm install express -g

成功之后可以在node_global/node_modules下看到多了一个express文件夹(这里因为笔者已经把后续步骤完成,所以多了cnpm文件夹)

3)配置NODE_PATH环境变量

路径为node.js安装路径node_global/node_modules,H:\DevelopeSoft\NodeJsDown\node_global\node_modules

为了验证以上步骤没有出错,在cmd命令行下面执行node,并输入require('express')命令执行,出现以下界面则成功,说明上述步骤没有错误

如有错误请检查环境变量是否配置正确,最后使用.exit退出该模式

4)安装taobao镜像

(类比maven的ali镜像作用,因为访问国外速度慢,使用镜像加速)

执行以下命令:npm install -g cnpm --registry=https://registry.

使用cnpm -v来验证

5)安装webpack

cnpm install webpack -g

cnpm install webpack-cli -g

使用webpack -v来验证

6)全局安装vue脚手架vue-cli

npm install -g vue-cli

使用vue -V验证(注意是大写的V)

7)使用Webstorm创建vue.js项目(默认项目,下面会介绍自定义创建项目)

如果遇见这种错误

/ fetchMetadata: sill resolveWithNewModule @vue/cli-ui@4.5.12 checking installable status

请不要慌张,这个就是因为没有走taobao镜像的原因,修改一下配置即可,如下:

npm config get registry(获取当前npm配置)

从截图我们可以看到,网址并不是之前下载安装的taobao镜像地址,所以需要我们修改设置

npm config set registry https://registry.

设置成功之后项目就能成功创建

等待项目创建完成

点击debug启动项目

访问地址之后出现以下页面即成功

8)使用vue-cli自定义创建项目

打开命令行工具输入vue create projectName

可能出现以下提示:

这个是因为当前vue-cli版本过低原因,根据提示安装最新的vue-cli,如果已经安装过了,需要先uninstall卸载,即上面截图第一个命令

命令行切换到想要创建的项目的路径下:

使用命令行vue create projectName 创建项目,接下来可以选择默认或者手动配置,手动配置可以根据自己需要的工具进行选择,下面举个例子:

(上下箭头进行选择,空格表示选中,enter确认,最下面的图的蓝色字体就是每个步骤选择的选项)

创建完成之后,切换到项目目录下,执行npm run serve启动项目

此时访问localhost:8080也会出现vue首页

如果想在webstorm启动,可以点击add configuration

name可以任意取,和项目名保持一致即可,点击apply并确认,然后点击界面的run或者debug也能正常启动项目了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。