「豆包Marscode体验官」- 牛刀 小试 创建一个 vue 模板项目

前言

直接浏览器打开在线编辑器地址marscode

现在Ai编程以及 在线 编码工具越来越普及，性能也越来越稳定，好处我感觉也非常明显。

1. 支持项目问答、代码补全功能。
2. 可以不用去下载开发工具，配置一系列复杂的环境配置。
3. 代码有时候忘记提交，在家就可以直接打开网站重新修改提交。
4. 有时候没带电脑是不是可以直接用平板 或者借用一下朋友的电脑打开浏览器就可以继续开发了呢。

废话不多说进入正题，注册这些我就不说了体验地址在上面。

新建一个项目

• 我这里新建了一个Vue3 项目 好像他现在默认的就是Vue3 TS 模板 没有vue2,而且没有配其他相应模板供开发选择，我觉得这个功能官方可以配置一下，例如路由、store、sass、less等，避免浪费时间。

• 创建后界面情况介绍，感觉整体风格和 vsCode 非常相似，所以大家切换起来没有什么难度，上手非常简单。

添加路由 router

• 我们来借助Ai 助手试一试 给ai 发送一条指令 为项目添加 router 回答的结果看起来好像是这么回事

• 发送第一条指令 你可以直接帮我把代码插入到项目中吗 好吧是我想多了...

• 那就手动把代码粘贴过来吧。

1. 安装router 插件

 npm install vue-router@4 

1. 在src 目录下 创建 /view/index.vue

代码如下

<template>
    <div>hello</div>
</template>
<script setup lang="ts">
</script>
<style scoped>

</style>

1. 在src 目录下 创建 /router/index.ts 将Ai 助手的回答粘贴过来 结合实际情况稍微改下

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
    {
        path: '/',
        name: 'Layout',
        redirect: '/home',
        meta: {
          title: '根路由',
        },
        children: [
          {
            path: '/home',
            name: 'Home',
            component: () => import(/* webpackChunkName: "home" */ '@/view/index.vue'),
            meta: {
              title: '首页',
            },
          },
         
        ],
      }

];

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

export default router;

1. 因为上面用到 @/ 路径简写 所以 我们需要修改下 tsconfig.json 配置 和 vite.config.ts 配置 在 tsconfig.json 文件 compilerOptions 配置中加入paths "@/*": ["./src/*"] ,在 vite.config.ts 配置中加入 resolve.alias 配置

tsconfig.json 完整代码如下

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "paths": {
      "@/*": ["./src/*"]
    },

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }],
}

vite.config.ts 完整代码如下 因为用到了node:path 所以需要安装@types/node 模块 npm install -D @types/node

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueDevTools from 'vite-plugin-vue-devtools';
import { resolve } from 'node:path';
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, './src'),
      },
    ],
  },
  plugins: [
    vue(),
    vueDevTools(),
  ],
});

1. 在main.ts 中引入router 文件并挂载 代码如下

import { createApp } from 'vue'
import router from "@/router/index";
import './style.css'
import App from './App.vue'

createApp(App).use(router).mount('#app')

1. 修改 App.vue 删除其他无关紧要的代码，把 router-view 容器放进去

<script setup lang="ts">
 
</script>

<template>
  <router-view #="{ Component }">
      <component :is="Component" />
    </router-view>
</template>

<style scoped>

</style>

1. 点下重启按钮运行效果如下

添加存储store

• 我们来借助Ai 助手试一试 给ai 发送一条指令 为项目添加sotre 回答的结果看起来好像是这么回事，但是用的是vuex

• 哪我们换一个指令看看 可以换成pinia 吗 这个结果回答就很满意了

• 依据Ai 助手的回答 将内容完善一下

1. 安装 pinia npm install pinia
2. 在src 目录下创建 store/index.ts文件

import { createPinia } from 'pinia';
const pinia = createPinia();
export default pinia ;

1. 修改main.ts 引入 store/index.ts 并挂载

import { createApp } from 'vue'
import router from "@/router/index";
import store from "@/store/index";
import './style.css'
import App from './App.vue'

createApp(App).use(router).use(store).mount('#app')

1. 在src/store 目录下 创建 文件 modules/test.ts

import { defineStore } from 'pinia';

export const useTestStore = defineStore('test', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      console.log('1111')
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

1. 修改 src/view/index.vue 文件 让我们来使用store

<template>
    <div>hello11</div>
    <div>数字{{count}}</div>
    <div>2倍数字{{doubleCount}}</div>
    <button @click="AddCount()">添加</button>
    <button @click="delCount()">减少</button>
    
</template>
<script setup lang="ts">
import { useTestStore } from '@/store/modules/test';
import { storeToRefs } from "pinia";
const testStore = useTestStore();
const { count,doubleCount } = storeToRefs(testStore);

// 使用 getters 添加
const AddCount = ()=>{
    testStore.increment()
};
// 减少
const delCount = ()=>{
    testStore.decrement()
};

</script>
<style scoped></style>

6.运行效果如下

总结

最后说下使用感，我感觉用 豆包MarsCode 来编程 普通小一点的项目是完全没有问题的，而且他提供编程Ai 助手 能极大的提升我们的开发效率。但是智能程度还不够，因为才开放不久有些缺陷肯定还是存在的，但是用的人多了，提意见的人多了肯定工具就会越来越完善好用。 希望本篇文章对你有帮助。