网站程序开发的基本步骤网站开发技术教学

学习资料

Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

准备工作都做完了，接下来开始Vue的正式学习。

第一步，打开VS Code

在VS Code里，我们也需要使用到终端，如果不是以管理员身份打开，在新建Vue项目的时候会报错。 

可以在盘内建立一个Vue学习的文件夹，接下来的Vue项目都放这个文件夹里面。

右键点击自己Vue目录下的项目存储文件，选择在集成终端中打开。在VS Code的右侧就会弹出终端的框。此时，我们就可以在这里面输入指令创建Vue项目。

 Vue项目创建

接下来的指令都将在终端中进行。注意：由于每个博主学习的资源可能不一样，所以在一些选择上面会有差别。大家可以多找几篇博客学习以下。

输入以下指令，回车。

vue create 自己项目的名字（注意，这个名字是不可以出现大写字母的，需要连结可以使用-符号）

 如果之前的环境配置没有问题的话，接下来会弹出这个选择。

1表示使用已经配置好工具的Vue3框架，2表示使用已经配置好工具的Vue2框架，3表示使用自定义框架。这里我们选择3。箭头号指向什么，表示当前的选择就是什么。我们使用向下的按键选择模式3回车确认。 

 

 在这里大家可以根据自己的需要手动选择特征，我选择的是Babel 和Progressive Web App （PWA） Support两个特征，回车确认后，出现以下内容表示成功。

 这里的3.x和2.x表示我们选择使用vue的版本。在这里，我们选择3.x版本。

这是系统询问刚刚的配置放置在什么地方，第一个是默认位置，第二个是放置在package.json里面。我们在这里选择默认位置进行回车。

接下来还会弹出一个询问，大致内容是是否保存配置信息设为模板。这里我们选择n进行回车。

 通过等待，接下来会出现以上内容。这时，我们只需要按照提示输入cd my-demo1（cd 表示切换到子目录 ，后面跟的是子目录的名字，我当时创建的vue项目名字叫my-demo1.大家把自己的vue项目名字输进去回车就可以了）

npm run serve

跳转到子目录下，我们可以输入提示给的第二个指令让项目运行起来。

接下来会弹出两个链接，我们打开其中一个如果弹出以下界面就说明成功了。

想让项目结束运行可以按Ctrl+C来退出。

想重新打开项目，只需要跳转到当前目录下，输入打开指令就好了。

npm run serve

好了，项目的创建到这里就结束了。下一篇介绍vue的正式学习。