vue脚手架及Element-UI的基本使用

安装vue脚手架的大致流程

安装vue脚手架前需要安装node.js和npm npm在安装node.js时候自带 Vue脚手架可以快速生成Vue项目基础的架构。 安装最新版本的Vue脚手架： window+R按键下输入cmd打开命令行输入：

npm install -g @vue/cli

这个过程依赖于你的网速，一般等待时间因人而异，我安装时候足足等待了半小时。 基于3.x版本的脚手架创建Vue项目： 1).使用命令创建Vue项目 cmd命令：vue create my-project 选择Manually select features(选择特性以创建项目) 勾选特性可以用空格进行勾选。 是否选用历史模式的路由：n ESLint选择：ESLint + Standard config 何时进行ESLint语法校验：Lint on save babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置) 是否保存为模板：n 使用哪个工具安装包：npm

这种方法现在不是很推荐使用较为繁琐

2).基于ui界面创建Vue项目 cmd命令打开：vue ui 在自动打开的创建项目网页中配置项目信息。 3).分析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配置文件

Vue脚手架的自定义配置

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

17.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";