Vue的搭建

第一步、创建脚手架

确保自己已经安装好了vue

输入代码：

npm init vue@latest

接着输入工程名以及选择对应的配置（这里可以都写NO 到后面的时候再添加配置），结果如图：

 

第二步，运行VUE

在vscode中，打开刚刚创建好的vue文件夹，并且运行代码。

 

 输入代码如下：

cd test1

 切换到test1文件夹下，这里我们已经在test1文件夹下了，不用写这行代码。

写下面两行代码以运行VUE：

npm install

 结果显示：

npm run dev

 

按住command+鼠标点击即可跳转链接访问。

 

第三步、编辑VUE

1、修改首页

①

这里是我们的网页视图，我们可以编辑来修改

 

 

 

 ②添加背景图片

更改main.css，并在main.js中导入main.css

 这里的url表示的是public文件夹下的图片资源

main.js中导入main.css文件，然后重新加载项目。

（如何重新加载项目：

打开package.json，点击运行

 

）

结果显示如下：