vue极速上手1----脚手架

vue极速上手

如果使用Hbuild编辑器，可以直接快捷安装

利用Hbuild创建的vue项目，一定要注意检查依赖是否安装以及能否正常使用

使用VScode安装：

1.安 装 cli 包

（在cmd中全局安装）

使用npm安装：

npm install -g @vue/cli

使用yarn安装：

yarn global add @vue/cli

2.检验安装版本

vue --version

3.使用vue/cli 创建项目

1.创建项目文件夹

2.在项目文件夹路径位置输入cmd进入命令

3. 创建vue项目

vue create 这里填写你自己要创建的项目名称

例如：我要创建的项目名称为 hello ， 我则需要输入 vue create hello

选择使用vue版本

出现以下代码是为安装成功了

这里使用的是npm创建项目，但如果使用yarn创建出现错误，可以在 .vuerc文件下修改默认创建，将默认使用yarn删除，系统就会自动用npm安装了。。。。但如果你还是想用yarn安装，你可以检查yarn的版本是否对应，重新安装yarn就可以了

4.运行项目

cd进入你的项目文件

cd 你的项目文件名称

运行项目

用npm 运行

npm run serve

用yarn运行

yarn serve

之后会出现两段地址

local ：本地地址

network：终端联网地址

将local 后面的地址复制到浏览器即可查看

4.分析vue结构

1. 将项目文件拖动到VScode中查看

node_modules:

node_modules 是安装 node 后用来存放用包管理工具下载安装的包的文件夹。比如 webpack 等这些工具。

public:

piblic属于⽤于存放公共js⽂件夹，在index.html中⽤script标签引⼊,在需要的页⾯使⽤

src:

src目录是存放初首页以外的所有源代码

.gitignore:

在工程中,并不是所有文件都需要保存到版本库中的,例如 “target” 目录及目录下的文件就可以忽略。 在Git 工作区的根目录下创建一个特殊的 .gitignore 文件,然后把要忽略的文件名填进去,Git 就会自动忽略这些文件或目录。

babel.config.js:

项目根目录中存在babel.config.js文件，即为Babel的配置文件，作用于整个项目。

jsconfig.json:

jsconfig.json文件 主要用来配置一个默认根路径,以后可以通过该根路径快速访问到子路径 以后@ 就代表src根路径了

package-lock.json:

package-lock.json文件的作用是锁定安装时包的版本号,并且需要上传到git,以保证其他人在npm install时大家的依赖能保证一致。

package.json:

package.json文件就是一个JSON对象,该对象的每一个成员就是当前项目的一项配置

vue.config.js:

vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的)根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。

分析src目录：

assets：

assets目录是存放代码以外的资源,比如图片（png格式的logo等）...etc

componets:

componets目录是存放除了主组件（App.vue）以外的所有组件

App.vue:

App.vue 主组件，入口组件

main.js:

main.js 程序的入口文件，项目的核心文件。

main.js 是入口文件，实例化vue以及用到的插件，css样式，存储全局变量等都是在这里操作

vue3 与vue2 不同，vue3中 需要用到的方法都是要从vue中主动去引入的，不像在vue2中那样，用Vue就可以点出来

createAPP():	reateApp可以分解成create和App来理解,create就是创建的意思,而App指的是Application,也就是应用的意思,那么createApp()就可以理解成创建一个Vue应用的意思。

.mount():	将ID为app的节点挂载到Vue

对于一个vue单文件组件：

包括三个根标签：template，script，style

而在main.js 可以利用import引入组件方法将组件注入index.html首页

tips：

在components 获取组件

在template 获取组件

需要导出的对象可以在export default中导出

文件组件**：

包括三个根标签：template，script，style

而在main.js 可以利用import引入组件方法将组件注入index.html首页

tips：

在components 获取组件

在template 获取组件

需要导出的对象可以在export default中导出