【Vue】创建Vue工程化项目

准备工程化环境

安装Node.js

查看node.js是否安装

npm换源

准备工程化环境

安装Node.js

Node.js --- Run JavaScript Everywherehttps://nodejs.org/en/点击下载长期版

随后打开下载好的安装包，一直点下一步完成安装即可。

查看node.js是否安装

打开命令行窗口，有显示版本号，及安装完成

node -v 或者 npm -v

npm换源

查看npm源,默认是指向https://registry.npmjs.org/，也就是官方源

npm config get registry

为了提高npm下载速度，可以给npm换源，这里使用淘宝源

npm config set registry https://registry.npmmirror.com

安装yarn或pnpm

yarn和pnpm、npm三者的功能类似，都是包管理工具，用来下载或删除模块包，性能上yarn和pnpm优于npm

npm install yarn -g

npm install pnpm -g

检测是否安装成功

yarn -v

pnpm -v

npm相关命令

npm装包：npm i 包名

npm删包：npm un 包名

yarn相关命令

yarn装包：yarn add 包名

yarn删包：yarn remove 包名

pnpm相关命令

pnpm装包：pnpm i 包名

pnpm删包：pnpm un 包名

脚手架

一个保证各项工作顺利开展的平台，好处就是拿来就用，零配置，基于它我们可以更方便的学习Vue

Vue3的脚手架：提供一个编写Vue3代码的工程化环境，基于这个环境，可以快速学习或开发Vue项目

创建项目的步骤

选定代码的存放位置
在选定的位置处，打开命令行窗口，执行命令`npm create vue@latest`，随后根据提示进行后续操作
进入项目根目录
安装项目依赖
启动项目

脚手架目录及文件介绍

1、项目第三方依赖

2、公共资源

3、项目源码

assets存储静态资源

assets/base.css放置项目默认的样式，颜色，字体
assets/main.css放置项目用到的样式

components组件的存放目录

icons放置组件中存在的图标

App.vue vue的入口（根组件）

main.js 项目打包入口

4、其他

index.html 项目的入口网页

package.json 项目的管理文件

README.md项目的说明书

vite.config.js vite的配置文件

3个入口文件的关系

要了解三个入口文件的关系，我们可以先了解main.js中代码

//导入样式

import './assets/main.css'

//导入创建应用的函数

import { createApp } from 'vue'

//导入Vue的入口文件

import App from './App.vue'

//基于Vue的入口创建应用并渲染到 id=app 的盒子中

createApp(App).mount('#app')

图解

问：main.js、App.vue、index.html的作用

main.js --- 项目打包的入口 ---创建应用

App.vue --- Vue代码的入口（根组件）

index.html --- 项目的入口网页

问：main.js、App.vue、index.html三者的关系

App.vue（Vue入口）=> main.js（项目打包入口）=> index.html（浏览器入口）

main.js是Vue代码通向网页代码的桥梁

*Vue单文件

Vue推荐采用 .vue文件进行Vue代码的开发
一个Vue单文件的组成：script（JS）+ template（HTML）+ style（CSS）
一个 .vue文件是一个独立的模块，就是一个独立的作用域，无需担心变量重名
.vue文件浏览器不能识别，需要借助vite进行打包，打包成html/css/js/image等，然后通过index.html进行访问

当在style加上scoped属性，是为了避免属性冲突，表明当前样式仅对当前template内标签生效

<style scoped>

</style>

传统方式渲染Hello World：

引入Vue3的源代码
准备渲染容器
创建应用并指明渲染的位置，同时提供数据并返回
插值进行渲染{{表达式}}

工程化的环境下渲染Hello Vue+Vite

在App.vue中提供setup函数，声明数据并返回
插值渲染{{表达式}}

setup简写

setup的完整写法

javascript 复制代码

<script>
  export default {
    setup() {
      const msg = ref('Hello Vue!')
      return { msg }
    }
  }
</script>

给script标签添加setup属性，这样script范围内的代码就类似于写在完整setup写法中setup范围内的代码，也不用在返回return属性值，默认会将包含的属性值都返回，如下：

javascript 复制代码

<script setup>
  const msg = ref('Hello Vue!')
</script>

快速生成vue文件的三部分组成

安装VSCode插件，在vue文件中输入vbase即可快速生成模板