33_Vue脚手架

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

安装3.x版本的Vue脚手架：#

npm install -g @vue/cli

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

使用命令创建Vue项目:#

vue create my-project

选择Manually select features(选择特性以创建项目)，勾选特性可以用空格进行勾选。

是否选用历史模式的路由：n

ESLint选择：ESLint + Standard config

何时进行ESLint语法校验：Lint on save

babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置)

是否保存为模板：n
使用哪个工具安装包：npm

基于ui界面创建Vue项目：#

vue ui

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

基于2.x的旧模板，创建Vue项目：#

npm install -g @vue/cli-init
vue init webpack my-project

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

├──v-proj
|    ├──node_modules:依赖包目录
|    ├──public：静态资源目录
|    ├──src：源码目录
|    |    ├──assets:资源目录
|    |    ├──components：组件目录
|    |    ├──views:视图组件目录
|    |    ├──App.vue:根组件
|    |    ├──main.js:入口js
|    |    └──router.js:路由js
|    ├──babel.config.js:babel配置文件
|    └──.eslintrc.js:

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

通过 package.json 进行配置 [不推荐使用]:

    "vue":{
        "devServer":{
            "port":"9990",
            "open":true
        }
    }

通过单独的配置文件进行配置，创建vue.config.js:

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

Element-UI的基本使用:#

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

安装：

npm install element-ui -S

导入使用：

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI)