vue入门创建项目

一、开发环境

(一) 安装配置 Node.js

1、下载安装 Node.js

下载地址：https://nodejs.org/zh-cn/

文件名：node-v16.13.1-x64.msi

2、检测 PATH 环境变量

点击 开始 => 运行 => "cmd"

运行 "path" ，确认输出结果中包含：C:\Program Files\nodejs\

3、检查 Node.js 版本

运行 "node --version" ，确认输出结果：v16.13.0

(二) 安装配置 Visual Studio Code

1、下载 Visual Studio Code

下载地址：https://code.visualstudio.com/

文件名：VSCodeUserSetup-x64-1.63.0

2、安装 Visual Studio Code

在安装过程中，勾选 "添加到PATH"

3、配置语言

打开插件面板，搜索 Chinese ，安装 Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

4、安装插件

依次安装插件：HTML CSS Support 、ESLint 、Vetur 、vue-helper

二、工作区

(一) 新建工作区

在 D盘 中新建文件夹：Study

在 Visual Studio Code 中点击 文件 => 打开文件夹 ，选中 Study 后 选择文件夹

在 Visual Studio Code 中点击 文件 => 将工作区另存为 ，输入文件名 Study.code-workspace 后 保存

(二) 关闭工作区

在 Visual Studio Code 中点击 文件 => 关闭工作区

(三) 打开终端

在 Visual Studio Code 中点击 查看 => 终端

三、新建项目

(一) 安装 vue

依次执行以下命令：

npm install vue@3.0 ：安装 vue 3.0

npm install @vue/cli ：安装 vue 客户端工具

vue --version ：查看 vue 客户端工具 版本号

vue upgrade --next ：更新 vue 客户端工具 到最新版本

npm install @vue/cli-init ：安装 vue 初始化项目 工具

[注]  首次安装 vue 时，在所有 install 命令后面添加 -g 来执行全局安装

[注]  如果 vue 命令无法执行，打开 PowerShell 命令，执行 set-ExecutionPolicy RemoteSigned ，执行 Y

(二) 创建项目

执行以下命令：

vue init webpack runoob-vue3

之后需要进行一些配置，默认回车即可，直到出现：

vue-cli · Generated "runoob-vue3".

进入项目：

cd runoob-vue3

运行项目：

npm run dev

(三) 项目打包

执行以下命令：

npm run build

执行完成后，会在 Vue 项目下生成一个 dist 目录，该目录一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js 、css 以及图片目录 images（如果有图片的话）

四、组件

(一) 根标签

所有组件由 template 、script 、style 三个标签组成

template 标签内必须且只能有一个子标签

script 标签使用规范：

 export default {
     name: 'pageName',
     data () {           // 存放视图数据
         return {
             num: 1,
             str: 'abc'
         }
     },
     methods: {          // 声明视图函数
         btnClick () {
           this.num++
         }
     }
 }