webapck+vue3+element
安装node
安装Vue
npm install vue
安装vue-cli脚手架
npm i -g @vue/cli-init
建立项目文件夹,执行创建脚本
vue create projectname / vue init webpack projectname
- vue create 是vue-cli3.x的初始化方式,目前模板是固定的,模板选项可自由配置,创建出来的是vue-cli3的项目,与cue-cli2项目结构不同,配置方法不同,具体配置方法参考官方文档。
- vue init 是vue-cli2.x的初始化方式,可以使用github上面的一些模板来初始化项目,webpack是官方推荐的标准模板名
手动选择需要的插件 vuex、router、babel 、vue版本、Css预处理器 等等配置
——项目创建过程已经集成化了 很简单
创建完成后的项目结构
已包含可用的router和vuex插件 无需再次手动引入
引入element-UI
注意:新版3.x 暂时还不支持ElementUI,可改用element-plus
安装起来也很简单,进入到根目录,然后
vue add element-plus
其他与下方vue2.x一致
1.创建src/styles文件夹 创建ele-variables.scss文件 在其中控制element主题颜色 字体等
scss引入相对麻烦或也可以使用这种方法:改变主题
/* 改变主题色变量 */
$--color-primary: #60BB69;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
2.创建src/utils文件夹 创建element.js文件 在其中完整组件列表的引入方式element控件与整体样式控制
import {
Button,
Table,
TableColumn,
Select,
Option,
Input,
Message,
MessageBox,
Menu,
Submenu,
MenuItemGroup,
MenuItem,
Dropdown,
Switch,
Header,
Pagination,
DropdownMenu,
DropdownItem,
Container,
Card,
Main,
Aside,
Breadcrumb,
BreadcrumbItem,
DatePicker,
Radio,
RadioGroup,
Tag,
Dialog,
Checkbox,
CheckboxGroup,
CheckboxButton,
Tabs,
TabPane,
Upload,
Badge,
Cascader,
Carousel,
CarouselItem,
Loading,
Tooltip
} from 'element-ui';
const element = {
install : (Vue) => {
Vue.use(Button),
Vue.use(Table),
Vue.use(TableColumn),
Vue.use(Select),
Vue.use(Option),
Vue.use(Menu),
Vue.use(MenuItem),
Vue.use(MenuItemGroup),
Vue.use(Submenu),
Vue.use(Input),
Vue.use(Header);
Vue.use(Switch),
Vue.use(Pagination),
Vue.use(Main);
Vue.use(Card);
Vue.use(Dropdown),
Vue.use(DropdownMenu),
Vue.use(DropdownItem),
Vue.use(Breadcrumb),
Vue.use(BreadcrumbItem),
Vue.use(Radio),
Vue.use(Aside);
Vue.use(DatePicker),
Vue.use(RadioGroup),
Vue.use(Tag),
Vue.use(Dialog),
Vue.use(Checkbox),
Vue.use(CheckboxGroup),
Vue.use(CheckboxButton),
Vue.use(Tabs),
Vue.use(TabPane),
Vue.use(Upload),
Vue.use(Container);
Vue.use(Badge),
Vue.use(Cascader),
Vue.use(Carousel),
Vue.use(CarouselItem),
Vue.use(Loading),
Vue.use(Tooltip),
Vue.prototype.$message = Message;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
}
};
import '@styles/ele-variables.scss';
export default element;
3.在main.js入口文件中不直接引入element,
import element from ‘./utils/element’;
配置less
Less则相对清晰明了,易于上手,对编译环境要求比较宽松。考虑到编译Sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择Less。
less官网
webpack配置
使用脚手架创建的项目会内置webpack,可以创建vue.config来配置
理解webpack
理解webpack2
。。。
vue.config.js
官网
vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。
vue-cli-service理解
随vue-cli一起安装 ,写在package.json脚本中,被npm run命令执行后
1.获取package.json中的依赖——>
2.初始化相关插件(vue-cli-plugin-element-plus)——>
3.解析命令使用的模式(development、testing、production)——>
4.加载环境变量,加载用户配置,应用插件——>
5.启动服务(启动webpack-dev-server后,在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中)
vite+vue3+VantUI
本地磁盘选择目录 powershell 使用Vite构建Vue3TS项目 再进行Git初始化git init
安装配置各种插件
npm i vant npm install vue-router npm install axios
其他 设置@路径别名 各种不识别 配置路由等问题不做详解自行百度即可
登录要考虑 密码的md5加密 多次登录的验证码 指定链接访问的重定向 登录后session的保存与请求头写入等
详细代码见gitee项目