Day01-Vue全家桶项目搭建

lanyan520
180 阅读3分钟

一 全家桶项目介绍

Vue在使用脚手架创建项目的时候，提供前端工程化项目

目前主要学习了Vue基础：Vue指令、Vue组件开发、Vue样式、组件通信、生命周期

全家桶项目是很多技术结合的一种开发模式：

  1. 全家桶项目搭建
  2. 路由搭建（前端路由）
  3. 网络请求封装
  4. ElementUI组件库（帮助我们快速开发）
  5. Vuex状态机（项目状态管理）
  6. 数据可视化

二 创建全家桶项目

1 使用脚手架创建全家桶项目

vue create vue-project

2 Vue的创建模式

image-20230403112914875

3 选择项目中需要的插件

? Check the features needed for your project: 
 ◯ Choose Vue version
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
❯◉ CSS Pre-processors
 ◯ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

选择的模板：

Babel：Babel是一个js的编译工程

4 选择vue版本

image-20230403111642587

5 路由配置

image-20230511145454567

6 选中SASS

image-20230403111829379

7 插件的相关配置代码放在哪个文件中

image-20230403111949016

8 是否保存当前配置

image-20230403112044915

9 出现以下内容就是项目创建完毕

image-20230403112421941

输入该两句命令快速启动vue项目

停止项目的命令 ctrl + c

扩展：Vue这个框架有两条路线

  1. PC端开发，目前我们学习的主线
  2. APP开发， 有一个新的框架weex ,但是目前都没有使用了

10 vue全家桶项目目录结构

  • public: 模板文件目录，该目录中的图片以及静态的资源不会经过webpack的编译。
  • src: vue的源代码目录
  • .browserslistrc: 浏览适配的配置文件
  • babel.config.js: babel是编译.vue结尾文件的插件。babel.config.js是该插件的配置文件
  • jsconfig.json: 是js运行环境的配置文件，webpack打包编译时会用到该配置
  • package-lock.json: 这是插件版本锁定文件
  • package.json: 包依懒的配置文件，也有部分webpack的配置
  • README.md: 项目的描述帮助文档。
  • vue.config.js: vue框架和webpack的配置文件

11 src目录结构

  • assets: 存放静态资源文件的目录，它会经过webpack的编译和打包。图片、css、js都会压缩处理。
  • components：存放功能组件的目录
  • router: vue-router的代码文件存放位置
  • store: vuex的代码文件存放位置
  • views: 存放页面组件的文件夹

三 ElementUI环境搭建

(1)如果已经创建好了一个项目，我们可以使用下面命令快速集成elementui这个组件库

vue add element

image-20230513173851965

image-20230513173951903

image-20230513174323988

image-20230513174410176

执行这个命令的时候，Element底层采用scss来设计样式，要求项目中必须要有sass和node-sass

node-sass在你们本地下载可能很慢。多试几次。

(2)配置完成后，项目产生一些变化

App.vue：里面代码会被初始化，默认给新增了element的按钮组件，你们需要重新改造

plugins：项目目录下面多了文件夹，这个文件夹里面配置就是elementui的插件记载

element-variables.scss：elementui的样式配置，以后可以在这个文件中自己改变主题色

(3)在main.js中加载element.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

只要项目启动，element环境就会加载成功

(4)在任何一个组件中引入element组件

<el-row>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
</el-row>
avatar
文章
阅读
粉丝