Vue CLI 3.0新建项目目录配置 及 路由配置(-- 环境配置)

308 阅读2分钟

Vue中新建项目简单的一些配置

一、首先进行Vue中脚手架Vue CLI 的配置

1、打开浏览器,输入 cli.vuejs.org/zh/ 进入Vue CLI的首页。

2、Vue CLI的首页如图:

3、进入起步之后,左侧有相应的功能,我们点击安装

4、点击之后,右侧相应的是这个页面

5、想要安装脚手架首先需要 Node.js ,官网是: nodejs.org/en/ ,进入下载即可,npm呢是下载Node的自带的一个包管理器,它集成现在绝大部分的资源包。

由于 Node网站在国外,由于某些原因我们的访问和下载可能不是很顺利,所以淘宝有一个npm的镜像提供选择,网站如下: npm.taobao.org/ 而安装包的命令从"npm" 变为了 "cnpm" 例:(npm install jquery => cnpm install jquery)

6、Node下载完成之后,键盘 "windows + R" , 输入cmd ,进入命令行界面,使用之前最好检查一下Node 和 npm 是否安装成功

(1)检查node版本 (2)检查npm版本 (3)安装cnpm淘宝镜像 (4)检查cnpm版本

7、安装完了之后执行Vue CLI的安装命令-- npm install -g @vue/cli

8、完成之后继续在命令行输入: vue create "这里是你的文件夹名字" //例如:vue create web ,这里要注意路径的问题,注意你当前所在的盘符,进入你需要创建的文件根目录,下图为我在d盘盘符下直接创建文件夹名为demo

9、之后回车,稍微等待如图所示:

10、我们按键盘上的方向键上下,选择第二个 default,再次回车

11、此时下方就在安装中......(有的小伙伴可能因为网络原因,安装会很慢,建议耐心的等一等)

12、出现这个语句就说明已经安装成功了

13、我们就按照它上面说的 ,输入 "cd demo","npm run serve"

14、出现这个界面就表明成功啦

15、接着只需要复制上面的ip地址,放入浏览器中打开就可以进入我们新建的项目了