Vue脚手架

Vue脚手架的基本用法

Vue脚手架可以快速生成Vue项目基础的架构。其官网地址为：https://cli.vuejs.org/zh/

使用步骤：

A.安装3.x版本的Vue脚手架：
    npm install -g @vue/cli
B.基于3.x版本的脚手架创建Vue项目：
    1).使用命令创建Vue项目
        命令：vue create my-project
        选择Manually select features(选择特性以创建项目)
        勾选特性可以用空格进行勾选。
        是否选用历史模式的路由：n
        ESLint选择：ES
        Lint + 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:

Vue脚手架的自定义配置

A.通过 package.json 进行配置 [不推荐使用]
    "vue":{
        "devServer":{
            "port":"9990",
            "open":true
        }
    }
B.通过单独的配置文件进行配置，创建vue.config.js文件
    module.exports = {
        devServer:{
            port:8888,
            //自动打开浏览器
            open:true
        }
    }
    配置完后要在终端重新命令 npm run serve 重启

Element-UI的基本使用

Element-UI:一套基于2.0的桌面端组件库
官网地址：http://element-cn.eleme.io/#/zh-CN

1.命令方式：

A.安装：
    npm install element-ui -S
B.导入 Element-UI 相关资源
	//导入组件库：
    import ElementUI from "element-ui";
    //导入组件相关样式
    import "element-ui/lib/theme-chalk/index.css";
    //配置  Vue 插件
 	Vue.use(ElementUI)

2.基于图形化界面自动安装

1. 运行 vue ui 命令，打开图形化界面
2. 通过 Vue 项目管理器，进入具体的项目配置面板
3. 点击 插件 -> 添加插件，进入插件查询面板
4. 搜索 vue-cli-plugin-element 并安装
5. 配置插件，实现按需导入，从而减少打包后项目的体积