Vue3学习笔记（1.0）

Vue.js是一套构建用户界面的渐进式框架。

Vue只关注视图层，采用自底向上增量开发的设计。

Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

<div id="hello-world" class="demo">
{{message}}
</div>

<script>
const HelloVueApp={
data(){
    return{
    message:'Hello world!'}}}

Vue.createApp(HelloVueApp).mount('#hello-world')
</script>

创建Vue项目

前提是拥有npm，为了安装速度快一些，安装cnpm。使用以下命令

npm install cnpm -g

在Vue.js构建大型应用时推荐使用cnpm安装，cnpm能很好地和Webpack或Browserify模块打包器配合使用：

安装vue-cli

cnpm install -g @vue/cli

 npm i -g @vue/cli-init

安装完查看版本

使用以下命令创建名称为runoob-vue3-mez的Vue项目

 

然后需要对项目进行配置，默认回车就可以，需要修改的地方自行修改就可以。

进入项目，安装并运行：

 此时我们根据提供的url便可以进行访问了。

 使用图形化界面

我们可以使用vue ui 命令打开图形化界面创建和管理项目

 

 Vite

Vite是一个web开发构建工具，由于其原生ES模块导入方式，可以实现闪电般的冷服务器启动。

通过在中断运行以下命令，可以使用Vite快速构建Vue项目

npm init vite-app <project-name>

 

 运行项目

 

 打开提供的URL

 Vue3项目打包

打包Vue项目使用以下命令：

cnpm run build

执行完成后，会在Vue项目下会生成一个dist目录，该目录会生成index.html文件即项目所拥有的css和js等样式（如果有的话）

直接打开index.html文件

 因为我们是用空白项目测试的，但是实际中还是要修改一下index.html中引入的css和JavaScript路径，因为是绝对路径，所以我们要改成相对路径。也就是去掉路径最前面的那个斜杠“/”

我们再来运行，发现icon图标正常显示了

 

 下面将详细介绍vue create命令创建项目

vue create命令创建项目语法格式如下：

vue create [options] <app-name>

创建一个由vue-cli-service 提供支持的新项目：

options选项可以是：

-p, --present《presentName》：忽略提示符并使用已保存的或远程的预设选项

-d,--default:忽略提示符并使用默认预设选项

-i,--inlinePreset<json>:忽略提示符并使用内联的JSON字符串预设选项

-m, --packageManager <command>： 在安装依赖时使用指定的 npm 客户端
-r, --registry <url>： 在安装依赖时使用指定的 npm registry
-g, --git [message]： 强制 / 跳过 git 初始化，并可选的指定初始化提交信息
-n, --no-git： 跳过 git 初始化
-f, --force： 覆写目标目录可能存在的配置
-c, --clone： 使用 git clone 获取远程预设选项
-x, --proxy： 使用指定的代理创建项目
-b, --bare： 创建项目时省略默认组件中的新手指导信息
-h, --help： 输出使用帮助信息

Vue3目录结构

 

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。 index.css: 样式文件。
static	静态资源目录，如图片、字体等。
public	公共资源目录。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式
dist	使用 npm run build 命令打包后会生成该目录。

 Vue3中的应用是通过使用createApp函数来创建的

const app=Vue.createApp({/* 选项*/})

传递给createApp的选项用于配置根组件。在使用mount()挂在应用时，该组件被用作渲染的起点。

Vue.createApp(HelloVueApp).mount('#hello-vue')

一个应用需要被挂载到一个dom元素中，以上代码使用mount('#hello-vue')将Vue应用HelloVueApp挂载到<div id="hello-vue"></div>中。

<div id="hello-vue" class="demo">
  {{ message }}
</div>
​
<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}
​
Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

在该代码中{{}}用于输出对象属性和函数返回值。

{{ message }} 对应应用中 message 的值。

data选项是一个函数。Vue在创建新组件实例的过程中调用该函数。它返回一个对象，然后Vue会通过相应系统将其包裹起来，并以$data的形式存储在组件实例中。