Vue2 第四节 脚手架的安装及目录说明

1.脚手架的安装

1.1 安装node.js

安装最新版本的node.jsnodejs下载官网

点击下载,一步一步走即可

1.2 安装 Vue CLI

在全局终端中,输入下面代码

npm install -g @vue/cli

若报错,试试提高权限

sudo npm install -g @vue/cli

检验是否安装成功
vue -V ,看看是否出现版本号

1.3 创建vue 脚手架

1.3.1 安装默认 vue 脚手架

本小节以 vue2 为例

在当前你的项目文件夹下,打开终端,创建 vue 脚手架

vue create my-project

• 搭建默认 Vue-3 脚手架
• 搭建默认 Vue-2 脚手架
• 手动搭建,添加自定义的目录

选择包管理器

• 使用 PNPM
• 使用 NPM

这里使用 NPM

若报错,根据错误提示信息,终端中运行以下命令，把 .npm 目录的拥有者改成你自己（非 root）：

sudo chown -R $(whoami) ~/.npm

再重新安装,vue create my-project

1.3.2 安装自定义脚手架

上下键选择,空格确认选择,回车确认

1.4 启动项目

在项目文件夹下:

• 安装依赖

npm install

• 启动开发服务器：

npm run serve

打开端口即可

2.重要目录中的文件说明

脚手架安装完成后,最重要的三个文件就是
index.html
App.vue
main.js

与之前不同的是,页面不在写进 index.html 中了,而是写在 App.vue 中,这是 App 根组件,项目运行看到的内容就在这里编写
main.js 是入口文件,第一个执行的文件

main.js 文件说明: