Vue学习笔记03

一. 通过 .vue文件生成 template、script(js)、css(style)框架，有高亮、提示等，方便书写和管理

<template>
  <div>Foo</div>
</template>

<script>
export default {
  
};
</script>

<style>
</style>

但是在html中 通过<script src="./foo.vue"></script>引入时，运行不了，因为系统无法解析.vue文件，
通过预处理器（webpack）可将.vue文件转换成 .js  .css文件，但是比较麻烦
vue中通过vue-cli(脚手架工具)，可以快速的创建项目

二. vue-cli

01.安装

npm i @vue/cli -g     全局安装
通过 vue -V 或者 vue --version 查看是否安装成功

02.使用

vue create vue-learn (vue3.X初始化方式)
vue init (vue2.x)初始化方式

public 和 src的区别在于：public不在webpack打包的资源内，而src在webpack打包的资源内部

03. 运行

在package.json内部创建了如下钩子文件：

npm run serve启动运行，可以打开创建的项目
bulid 打包文件，在项目中会生成一个dist文件夹，交给后端或者运维去放在服务器上，线上运行的就是打包之后的脚本
lint 检测格式是否规范

04. 运行

 main.js是js文件的入口文件

05.如何创建并使用一个vue文件

1）创建一个vue文件
2）在App.vue中通过 import HelloWorld from "./components/HelloWorld.vue"  导入
3）在export的components中注册组件
4）使用<HelloWorld>...</HelloWorld>

// 创建视图
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <Foo>foo</Foo>
  </div>
</template>

//创建js脚本
<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>

06.可视化

终端输入命令：vue ui

07.学习vue文档

在终端输入 vue，会弹出关于vue的相关文件