vue+elementUI 搭建与使用

  1. 首先默认安装好了vue3与node.js、webpack
  2. 打开控制台输入命令 vue create 项目名称 然后回车 创建vue项目
vue create vue-manage-system
然后进入手动选择配置

elementui 指南 elementui ts_Web

这里简单介绍一下 前面两个是之前配置好的选择 以后我们创建项目也可以根据需要进行选择默认项目创建,第三个 default是vue本身自己的默认选项,最后一个是我们自定义选项,本次使用的是自定义选项。

1.进入这里有一些用户自定义选项

elementui 指南 elementui ts_elementui 指南_02


下面介绍一下这些选项的含义:

**Babel:**用来转义一下js,如ES6、ES7如果浏览器不支持的话可以用它转义

TypeScript: TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人再用

**Progressive Web App (PWA) Support:**渐进式Web应用程序

Router: vue-router(vue路由)

Vuex: vuex(vue的状态管理模式)

CSS Pre-processors: CSS 预处理器(如:less、sass)

**Linter / Formatter:**代码风格检查和格式化(如:ESlint)

Unit Testing: 单元测试(unit tests)

E2E Testing: e2e(end to end) 测试

最终的选择是:

elementui 指南 elementui ts_自定义_03

  1. 回车后看到如图:

elementui 指南 elementui ts_Web_04


问是否使用哈希模式 ,这时候输入n,不使用哈希模式,因为哈希模式需要配置,需要与后端人员进行配合而 我们的Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由(通过调用浏览器提供的接口)

2. 然后进入css预处理器选择,这里选择第一个 Sass/SCSS

3. 然后选择如何格式化代码,这里选择最后一个 ESLint + Prettier

4. 回车后选择格式化选择,这里选择格式化并保存 选第一个 Lint on save

5. 然后这里问是否选择独立的配置文件,还是统一配置到 package.json中,这里选择独立配置文件。

elementui 指南 elementui ts_Web_05


6. 然后这里问是否把这套配置保存起来,一般的话选择保存也不错,后面用的时候稍微方便一下,选择保存后会让你对这个保存设置命名,这里按自己喜好命名一下即可。

elementui 指南 elementui ts_Web_06


elementui 指南 elementui ts_vue_07


回车,等待初始化项目即可!

学习笔记,如果有不对的地方多多指教