vue脚手架与Element-UI组件库

吓死羊了
2,097 阅读7分钟

介绍并安装3.x版本的vue脚手架

  • 脚手架基本用法介绍

    • Vue脚手架：用于快速生成Vue项目基础架构
    • 理解：Vue脚手架，就是用于快速创建vue项目工具
    • 官网：cli.vuejs.org/zh/guide/

  • 安装

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

    • 推荐安装 3.x版本：因为这个版本即可以安装2.x版本的项目也可以安装3.x版本的项目

      npm install -g @vue/cli

    • 检验安装成功

      vue -V
#如果能提示脚手架的版本，则说明安装成功，例如版本为 3.3.0

脚手架创建vue项目方式

脚手架创建项目方式

//  1. 基于 交互式命令行的方式 ,创建新版Vue

     vue create my-project
   // my-project  属于项目名称，名称不能为中文或特殊字符

//  2. 基于 图形化界面的方式，创建新版 vue项目
     vue ui
     
//  3.基于 2.x的旧模板，创建旧版 vue项目
    vue install -g @vue/cli-init
    vue init webpack my-project

  • 交互式命令行的方式，创建vue项目步骤

    1. 创建项目

      1.打开cmd
2.执行：vue create vue-proj_01
      • vue-proj_01 为项目名称，名称不能为中文或特殊字符， 名称中间不要写空格

    2. 选择创建项目方式

      image-20210130225805201

      • 这个界面是vue手脚架提供的项目初始化配置的界面（也就是交互式命令行界面）
      • 上下键选择，回车确定
      • Vue CLI v3.3.0 版本号

    3. 选择安装的功能

      image-20210130230659632

      • Choose Vue version： 选择vue版本(2, 3)
      • Babel：es6 转 es5
      • Router：路由。在脚手架工具中，它会自动在本项目中使用路由，创建好基本的路由配置（不再需要手动去安装vue-router）。后续会提示你是否启用历史模式
      • CSS Pre-processors：CSS 预处理器，后续会提示你选择 less、sass、stylus 等
      • Linter / Formatter：代码格式校验，ESLint 代码格式校验。后续会再次让你具体选择eslint的标准。

    4. 确定Vue的版本

      image-20210130231238798

      • 版本的区别上面有解释

    5. 路由模式

      image-20210130231726891

      • 是否使用 history 路由模式，这里输入 n ，不使用history模式，而是用hash模式。

    6. CSS pre-processor 选择预处理器使用谁（less)

      image-20210131095931883

      • 选择css预处理器，这里选择我最熟悉的less

    7. 选择代码风格校验工具

      image-20210131100453435

    8. 校验lint语法方式（什么时候校验lint代码）

      image-20210131102635808

      • Lint on save：在保存文件时会检查eslint错误。
      • Lint and fix on commit：每当执行 git commit 提交的时候，会自动修正eslint错误。
      • 建议两个都选，更严谨

    9. 选择在哪保存配置文件

      image-20210131103651734

      • In dedicated config files：分别保存到单独的配置文件
      • In package.json：保存到 package.json 文件中
      • 建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。

    10. 是否保存模板

      image-20210131104133650

    11. 创建项目

      创建项目08

    12. 启动项目

      启动项目01

      • cd vue_proj_01 进入项目目录 （重要）
      • npm run serve 启动项目目录

    13. 启动成功

      image-20201127105131679

      • http://localshot:8080. 中的localhost表示本机，也可以改成你自己的电脑的ip地址。
      • network:表示在在同一局域网下，可以通过这个地址来访问。
      • 8080表示端口号，默认下用这个，如果它被占用了，会依次向后编号。

    14. 访问 查看效果

      打开浏览器，访问 http://localshot:8080.地址，如果能看到如下页面，说明一个本项目已经创建成功，并运行良好。

      启动成功02

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

      image-20210131125008984

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

    16. 项目架构图

      架构2

    17. 可能遇见的问题

      • 问题：项目无法启动，运行npm run serve报错
      • 解决：检查是否进入了项目文件夹，即上述操作中的cd命令是否执行
      • 问题：安包不成功
      • 解决：检查网络是否正常，检查npm的镜像是否指向淘宝。

  • 基于图形化界面创建新版vue项目

    • 基于图形化界面创建项目步骤

    1. 执行命令

      #进入cmd
执行：vue ui
      • 如果执行完命令打开的是IE浏览器，则需要修改默认浏览器

    2. 修改默认浏览器

      • 打开控制面板，进入程序

      • 选择默认程序

        image-20210131133401265

      • 设置默认程序

        image-20210131133502112

      • 默认程序

        image-20210131133618331

    3. 创建项目

      ui02

    4. 输入项目名称

      ui03

    5. 配置选择

      ui04

    6. 选择安装的功能

      ui05

      ​ Linter/Formatter

      • 用ESLINT或Prettier检查和加强代码质量
      • 其实就是： 代码风格、格式校验

    7. 配置项

      ui06

      • lint 在保存时校验格式

    8. 保存配置信息

      ui07

    9. 创建成功（看到项目管理界面）

      ui08

    10. 项目管理器

      ui09

    11. 任务

      ui10

      • 其他的功能，大家可以自己点击看看
      • 可以在插件功能中管理插件
      • 可以在配置功能中进行配置

    12. 查看项目首页（点击上图的：启动app ,按钮进入）

      ui11

      说明：vue-cli脚手架是整合了webpack打包工具

      • package.json中默认有启动项目的命令
"scripts": {
    "serve": "vue-cli-service serve", //启动服务
    "build": "vue-cli-service build", //编译并压缩
    "lint": "vue-cli-service lint"    //修正语法错误
  },
  //可以使用 vue run xxx 启动命令

分析项目结构

  • 目录结构

    目录结构

  • 真实目录

    • assets和public都是存放静态文件，习惯在assets中存放图片和字体图标
    • component: 存放组件
    • views：存放视图代码
    • App.vue：根组件
    • main.js：打包入口文件
    • router.js：路由文件
    • eslintrc.js：eslint配置文件
    • .gitignore：git忽略文件
    • babel.config.js：babel配置文件
    • package.json: 包管理配置文件
    • postcss.config.js：postcss配置文件

  • 问题：如果发现创建的项目没有router.js则有可能是因为vue和vue-router的版本不一样

对vue脚手架项目进行自定义配置

  • 单独配置文件项目（意思就是将自定义配置文件单独存放）

    • 在项目的根目录下创建一个vue.config.js

    • 在该文件中进行配置，从面覆盖默认配置

          module.exports = {
        devServer:{
            port:8888,  //设置端口
            open:true   //设置执行 npm run serve命令能自动访问项目页面
        }
    }

Element-UI组件库

介绍element-ui并基于命令行方式手动安装

  • Element-UI：一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库

  • EIement-uI 官网: element.eleme.cn/#/zh-CN

  • Element-UI提供了丰富的组件，设计非常美观，我们可以直接拿来用，这样可以省去很多样式编写时间，让我们更加专注逻辑代码

  • 命令行手动安装

    1. 安装依赖包 npm i element-ui-S

    2. 导入 Element-UI 相关资源

      # main.js
 //手动配置 element-ui
//导入组件库
 import ElementUI from 'element-ui'
//导入组件相关的样式
 import 'element-ui/lib/theme-chalk/index.css'
//配置vue 插件
 Vue.use(ElementUI)
      • Vue.use是一个函数，相当于把ElementUI挂载到Vue身上，这个 项目就可使用ElementUI插件
      • 上述代码，写到打包入口文件：main.js

    基于图形化界面自动安装element-ui

    步骤

    1. 运行 vue ui 命令，打开图形化界面

       打开终端执行 
 vue ui

    2. 打开图形化界面后，创建项目（这里可以选择历史模板）

      ui安装Element-UI02

    3. 进入插件--添加插件，然后搜索 vue-cli-plugin-element 进行安装

      ui安装Element-UI04

      选中vue-cli-plugin-element(单击即可)，然后点击右下角安装

    4. 安装成功之后，出现如下配置界面

      image-20210131182146902

      • import on demand：按需导入
      • demand：要求

    5. 通过vscode打开项目

      vue_proj_04目录结构

      • main.js中导入了element.js（自动生成代码）

        import './plugins/element.js'

      • element.js中导入了Element-UI（自动生成代码）

        import Vue from 'vue'
import { Button,Row } from 'element-ui'

Vue.use(Button)
Vue.use(Row)
avatar
文章
阅读
粉丝