前端Demo|vue.js创建第一个hello-world文件|适合有一定js基础的同学

思维导图

配置node环境

在安装vue.js前我们先要为电脑配置一个node环境

在以下网址

https://nodejs.org/en/

下载红圈的那一个

可避免配置麻烦

在我们安装完成后

可以使用快捷键Win+r打开“运行”对话框

输入cmd

输入node -v，若出现版本号，代表安装成功

npm包管理器，是集成在node中的，所以安装了node也就有了npm

直接输入npm -v命令，显示npm的版本信息

安装国内镜像

安装完成后

国内访问npm可能比较慢，也会出现npm安装依赖包失败的情况

所以我们通过安装npm国内镜像

命令行输入

npm install -g cnpm --registry=https://registry.npm.taobao.org

来安装

问题解决

安装脚手架

回到vscode

安装vue-cli脚手架构建工具

我们接下来在vscode上完成

点击新建终端

命令行输入npm install -g @vue/cli

等他跑完，如下

输入vue create hello-world

创建hello-world程序

以管理员身份打开vscode

无下图问题的同学，可以跳过哦

出现这种情况，是因为我们把项目建到了C盘上

Ｃ盘的项目需要用管理员身份启动vscode

右键“开始”

输入set-ExecutionPolicy RemoteSigned

然后输入Y回车

使用hello-world

在命令行输入cd hello-world

打开hello-world文件

再输npm run serve

这时，点击Local后面的网址

可以看到我们创建的效果如下

目录文件的作用

node_modules：npm 加载的项目依赖模块,（整个项目需要的依赖资源）

src：这里是我们开发的主要目录，基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：

1.assets:放置一些图片，如logo等

2.components:目录里放的是一个组件文件，可以不用

3.App.vue：项目入口文件，我们也可以将组件写这里，而不使用components目录

4.main.js ：项目的核心文件

index.html：首页入口文件，可以添加一些meta信息或者同统计代码

package.json：项目配置文件

README.md：项目的说明文件

config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置

好啦！现在我们的vue框架已经安装好了

让我们再建一个website文件，开始制作网页吧

E N D