【vue】vue脚手架

3：Vue单文件组件

传统Vue组件的缺陷：

• 全局定义的组件不能重名，字符串模板缺乏语法高亮，不支持css(当html和js组件化时，css没有参与其中)
  没有构建步骤限制，只能使用H5和ES5，不能使用预处理器（babel）
  解决方案：
  使用Vue单文件组件，每个单文件组件的后缀名都是.vue
  每一个Vue单文件组件都由三部分组成
  1).template组件组成的模板区域
  2).script组成的业务逻辑区域
  3).style样式区域

<template>

    组件代码区域

</template>

<script>

    js代码区域

</script>

<style scoped>

    样式代码区域

</style>

【注】安装Vetur插件可以使得.vue文件中的代码高亮

4：vue的脚手架

Vue脚手架可以快速生成Vue项目基础的架构。

A.安装3.x版本的Vue脚手架：
npm install -g @vue/cli

B.基于3.x版本的脚手架创建Vue项目：

1).使用命令创建Vue项目
命令：vue create my-project
选择Manually select features(选择特性以创建项目)
勾选特性可以用空格进行勾选,注意勾选Babel,Router,Linter/Formatter。
是否选用历史模式的路由：n
ESLint选择：ESLint + Standard config
何时进行ESLint语法校验：Lint on save
babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置)
是否保存为模板：n
使用哪个工具安装包：npm
2).基于ui界面创建Vue项目
命令：vue ui
在自动打开的创建项目网页中配置项目信息。
3).基于2.x的旧模板，创建Vue项目
npm install -g @vue/cli-init
vue init webpack my-project

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:

4.1:Vue脚手架的自定义配置

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

5：Element-UI的基本使用

Element-UI:一套基于2.0的桌面端组件库
官网地址：http://element-cn.eleme.io/#/zh-CN
A.安装：
npm install element-ui -S
B.导入使用：
import ElementUI from “element-ui”;
import “element-ui/lib/theme-chalk/index.css”;