Vite.js——下一代前端开发与构建工具。

——Vue-CLI 的 webpack 和这个比起来实在太慢啦。


生成 Vue3 的 Vite.js 项目

# 生成以vue3为预设模板的vite.js项目
# 其他支持预设模板请查阅官方文档
npm init vite@latest vite-w-vue --template vue
cd ./vite-w-vue
# 装依赖
npm i
# 运行热更新服务器
npm run dev

vjdEsDje6u

生成完毕!访问local:后面的网址:

image-20210724172109629

可以看到冷启动的速度非常快,半秒都没。

换成 Webpack 的话……


其他杂七杂八的配置

Eslint

vsc 的插件肯定是要装一下的。

项目根目录下创建.eslintrc文件,内容如下:

{
  "root": true,
  "env": {
    "node": true
  },
  "extends": ["plugin:vue/vue3-essential", "eslint:recommended"],
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "rules": {}
}

Quasar

Quasar2.x 支持 Vue3 啦!

Quasar 是个基于 vue 的做的非常 nice 的 UI 框架。

一点点拟物化对老人的审美十分友好。

项目根目录,命令行运行以下代码:

# 安装quasar以及extra模块
npm i quasar @quasar/extras

./src/quasar-config.js文件内容:

// 语言文件
import lang from "quasar/lang/zh-CN";
// 谷歌图标库,按需引入就好
import "@quasar/extras/material-icons/material-icons.css";
// quasar样式文件
import "quasar/dist/quasar.prod.css";
// 插件,按需引入使用
import { Notify } from "quasar";

// 导出模块
export default {
  config: {},
  plugins: { Notify },
  lang,
};

./src/main.js文件内容:

import { createApp } from "vue";
import App from "./App.vue";
import { Quasar } from "quasar";
// 导入写好的配置文件
import quasarConfig from "./quasar-config";

createApp(App).use(Quasar, quasarConfig).mount("#app");

想要引入其他插件或图标库……请参考官方文档

./src/componets/HelloWorld.vue尝试一下,将:

<button type="button" @click="state.count++">
  count is: {{ state.count }}
</button>

改成:

<q-btn
  class="glossy"
  color="primary"
  :label="'count is: ' + state.count"
  @click="state.count++"
/>

效果:

image-20210724185734910

按钮样式改变,成功!

Vue-Router

项目根目录下,运行下面的命令行代码安装:

npm i vue-router

新建文件./src/router/index.js,文件内容如下:

import { createRouter, createWebHistory } from "vue-router";
// 你不想要难看的'/#/'吧?
const history = createWebHistory();

import HelloWorld from "../components/HelloWorld.vue";

const routes = [
  {
    path: "/",
    component: HelloWorld,
  },
];

const router = createRouter({
  history,
  routes,
});

export default router;

修改main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

如上代码,添加importuse即可。

Vuex

新建文件./src/store/index.js

import { createStore } from "vuex";

export default createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {},
});

修改./src/main.js

import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";

createApp(App).use(store).mount("#app");