1.Vue脚手架
Vue脚手架可以快速生成Vue项目基础的架构，官方网址为Vue.cli
A.安装3.x版本的Vue脚手架：
npm install -g @vue/cli

B.基于3.x版本的脚手架创建Vue项目：
1).使用命令创建Vue项目（可用cmd，powershell，vscode终端）

命令：vue create my-project
选择Manually select features(选择特性以创建项目)
勾选特性可以用空格进行勾选。
是否选用历史模式的路由：n
ESLint选择：ESLint + Standard config
何时进行ESLint语法校验：Lint on save
babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置)
是否保存为模板：n
使用哪个工具安装包：npm

图解：















总结：cd进入所创建的项目，出入命令：nom run server 使项目跑起来

2).基于ui界面创建Vue项目

命令：vue ui

在自动打开的创建项目网页中配置项目信息。

图解：

















总结：最后在任务中点击serve使项目跑起来
3).基于2.x的旧模板，创建Vue项目

npm install -g @vue/cli-init

vue init webpack my-project

步骤与1）相似，略，目前应用比较少
C.分析Vue脚手架生成的项目结构
node_modules:依赖包目录

public：静态资源目录

src：源码目录

src/assets:资源目录

src/components：组件目录

src/views:视图组件目录

src/App.vue:根组件

src/main.js:入口js

src/router.js:路由js

babel.config.js:babel配置文件

.eslintrc.js:
2.Vue脚手架的自定义配置
 A.通过 package.json 进行配置 [不推荐使用]
        "vue":{
            "devServer":{
                "port":"9990",
                "open":true
            }
        }
    B.通过单独的配置文件进行配置，创建vue.config.js
        module.exports = {
            devServer:{
                port:8888,
                open:true
            }
        }

以上配置为：端口修改为8888，打包好后自动打开项目
加油，

下一篇：Element-UI的基本使用

1.Vue 脚手架的基本用法
1.1安装 3.x 版本的 Vue 脚手架：
npm install -g @vue/cli

1.2基于3.x版本的脚手架创建vue项目

1.3 Vue 脚手架生成的项目结构分析

2.Vue 脚手架的自定义配置
2.1. 通过 package.json 配置项目（了解）

2.2通过单独的配置文件配置项目
① 在项目的跟目录创建文件 vue.config.js

② 在该文件中进行相关配置，从而覆盖默认配置

vue脚手架 接webpack
二十九、vue脚手架
1、Vue CLI2 版本
1.1、安装
1.2、初始化项目
1.3、引导初始化内容详解
1.4、项目结构详解
2、Runtime-Compiler和Runtime-only
2.1、区别
2.2、render和template
2.3、了解vue程序运行过程
2.4、代码展示
3、Vue CLI3版本
3.1、安装
3.2、初始化项目
3.3、引导初始化内容详解
3.4、项目结构详解
3.5、本地服务器打开用户图形化界面

二十九、vue脚手架
1、Vue CLI2 版本
1.1、安装
npm i -g @vue/cli-init

1.2、初始化项目
vue init webpack my-project

1.3、引导初始化内容详解

1.4、项目结构详解

2、Runtime-Compiler和Runtime-only
2.1、区别

2.2、render和template

2.3、了解vue程序运行过程

2.4、代码展示
main.js

mport Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  render: function (createElement) {
    // 1.普通用法: createElement('标签', {标签的属性}, [''])
    // return createElement('h2',
    //   {class: 'box'},
    //   ['Hello World', createElement('button', ['按钮'])])

    // 2.传入组件对象:
    return createElement(App)
  }
})


// runtime-compiler(v1)
// template -> ast -> render -> vdom -> UI

// runtime-only(v2)(1.性能更高 2.下面的代码量更少)
// render -> vdom -> UI

3、Vue CLI3版本
3.1、安装
npm i -g @vue/cli

3.2、初始化项目
vue create my-project

3.3、引导初始化内容详解

3.4、项目结构详解

3.5、本地服务器打开用户图形化界面
vue ui

vue脚手架
基于3.x版本的脚手架创建vue项目
//1. 基于交互式命令行的方式，创建新版vue
vue  create  my-project
//2.基于图形化界面的方式，创建新版vue
vue  ui

//3.基于2x的旧模板，创建旧版vue
npm install -g @vue/cli-init
vue init webpack my-project

vue 脚手架自定义配置
通过单独的配置文件配置项目

在项目的根目录创建文件vue.config.js
在该文件中进行相关配置，从而覆盖默认配置

module.exports = {
	devServer: {
		port: 8888,
		open: true
	}
}

Element-UI 的基本使用
基于命令行方式手动安装

安装依赖包npm install element-ui -S
导入Element-UI 相关资源

//导入组件库
import ElementUI from 'element-ui'
//导入组件相关样式
import 'element-ui/lie/theme-chalk/index.css'
//配置vue插件
Vue.use(ElementUI)