Vue.js

1.Vue是什么

概念

渐进式框架

官方地址(作者:尤雨溪)

2.脚手架

0配置webpack,开箱即用

安装

全局安装@vue/cli模块包

yarn global add @vue/cli
#or
npm install -g @vue/cli

查看Vue版本

vue -V

创建脚手架

创建项目

==注意: 项目名不能带大写字母, 中文和特殊符号==
```
#vue和create是命令, vuecli-demo是自己的文件夹名
vue create vuecli-demo
```
选择模板

选择包管理器

下载依赖包

假装有图片

切换到脚手架项目下，启动服务器

cd vuecil-demo
yarn serve
#或 npm run serve

在浏览器输入地址即可

目录分析

vuecil-demo         # 项目目录
    ├── node_modules # 项目依赖的第三方包
    ├── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网页浏览的是它)
    ├── src          # 业务文件夹
      ├── assets     # 静态资源
        └── logo.png # vue的logo图片
      ├── components # 组件目录
        └── HelloWorld.vue # 欢迎页面vue代码文件 
      ├── App.vue    # 整个应用的根组件
      └── main.js    # 入口js文件
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置
    ├── package.json # 依赖包列表
    ├── README.md    # 项目说明
	└── yarn.lock    # 项目包版本锁定和缓存地址

主要文件及含义

node_modules      – 第三方依赖包
public/index.html – 浏览器运行的网页
src/main.js       – webpack打包的入口文件
src/App.vue       – Vue入口页面
package.json      – 依赖包列表文件和自定义命令

文件关系

自定义配置

新建vue.config.js

/* 覆盖webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000
  }
}

就这吧,不懂百度去

vue脚手架安装和配置

Vue.js

1.Vue是什么

2.脚手架

目录分析