vue+elementUI 搭建与使用
- 首先默认安装好了vue3与node.js、webpack
- 打开控制台输入命令 vue create 项目名称 然后回车 创建vue项目
vue create vue-manage-system
然后进入手动选择配置
这里简单介绍一下 前面两个是之前配置好的选择 以后我们创建项目也可以根据需要进行选择默认项目创建,第三个 default是vue本身自己的默认选项,最后一个是我们自定义选项,本次使用的是自定义选项。
1.进入这里有一些用户自定义选项
下面介绍一下这些选项的含义:
**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) 测试
最终的选择是:
- 回车后看到如图:
问是否使用哈希模式 ,这时候输入n,不使用哈希模式,因为哈希模式需要配置,需要与后端人员进行配合而 我们的Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由(通过调用浏览器提供的接口)
2. 然后进入css预处理器选择,这里选择第一个 Sass/SCSS
3. 然后选择如何格式化代码,这里选择最后一个 ESLint + Prettier
4. 回车后选择格式化选择,这里选择格式化并保存 选第一个 Lint on save
5. 然后这里问是否选择独立的配置文件,还是统一配置到 package.json中,这里选择独立配置文件。
6. 然后这里问是否把这套配置保存起来,一般的话选择保存也不错,后面用的时候稍微方便一下,选择保存后会让你对这个保存设置命名,这里按自己喜好命名一下即可。
回车,等待初始化项目即可!
学习笔记,如果有不对的地方多多指教