图解使用Visual Studio Code创建和运行Vue项目

本篇经验将和大师介绍利用Visual Studio Code建立和运行Vue项目标方式,但愿对大师的工作和进修有所帮忙!
方式/
1打开电脑中已经安装的Visual Studio Code软件,如下图所示:

图解使用Visual Studio Code创建和运行Vue项目



2打开菜单栏中的文件->选择文件夹,浏览到当地磁盘中某个vue项目标空白目次,如下图所示:

图解使用Visual Studio Code创建和运行Vue项目



3在资本办理器空白处右键选择“在终端中打开”,如下图所示:

图解使用Visual Studio Code创建和运行Vue项目



4我们在终端中输入以下号令
npm install vue -g
如下图所示:

图解使用Visual Studio Code创建和运行Vue项目



5继续在终端中输入以下号令
npm install vue-cli -g
如下图所示:

图解使用Visual Studio Code创建和运行Vue项目



6继续在终端中输入以下号令
npm install webpack -g
如下图所示:

图解使用Visual Studio Code创建和运行Vue项目



7我们输入以下号令来建立一个项目
vue init webpack my-first-vue-project
如下图所示:

图解使用Visual Studio Code创建和运行Vue项目



8经由过程cd号令进入到建立的项目目次下,然后输入号令
npm install
如下图所示:

图解使用Visual Studio Code创建和运行Vue项目



9项目建立完当作后的目次布局如下图所示:

图解使用Visual Studio Code创建和运行Vue项目



10输入号令
npm run dev
来运行vue项目,当作功之后会提醒应用程序拜候的路径,如下图所示:

图解使用Visual Studio Code创建和运行Vue项目



11【图解使用Visual Studio Code创建和运行Vue项目】我们在浏览器中输入地址,即可拜候vue的项目了,如下图所示:

图解使用Visual Studio Code创建和运行Vue项目




以上内容就是图解使用Visual Studio Code创建和运行Vue项目的内容啦,希望对你有所帮助哦!

    猜你喜欢