vue3.x项目构建丨技术开发分享录

vue3.x项目构建

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"## 构建注意\n\n- 需要高版本的 `nodejs`,低版本的会报错,可以选择 `12.x` 版本的 `nodejs`\n- vue3.x不支持IE11,有浏览器要求的要注意\n- vue3.x有些功能处理实验阶段,切忌在项目中直接使用,如:`<script setup></script>`中的setup属性,还是使用老的 `setup(){}` 函数来处理最好\n\n## 项目结构\n\n![](https://pic2.zhimg.com/80/v2-e8100d2e989e747b32449fe17d0fd6b1_720w.jpg)\n\n## 创建项目\n\n```cli\n$ npm init @vitejs/app <project-name>\n$ cd <project-name>\n$ npm install\n$ npm run dev\n```\n\n## 安装依赖\n\n```cli\n$ npm install vue-router@4 --save\n$ npm install vuex@next --save\n$ npm install axios --save\n$ npm install element-plus --save\n```\n\n## 修改 main.js\n\n```\nimport { createApp } from 'vue'\nimport router from './router'\nimport store from './store'\nimport App from './App.vue'\nimport ElementPlus from 'element-plus';\nimport 'element-plus/lib/theme-chalk/index.css';\n\nconst app = createApp(App)\n\napp.use(router)\napp.use(store)\napp.use(ElementPlus)\n\napp.mount('#app')\n```\n\n## 修改 App.vue\n\n```html\n<template>\n  <div id=\"app\">\n    <h1>Hello App!</h1>\n    <p>\n      <!--使用 router-link 组件进行导航 -->\n      <!--通过传递 `to` 来指定链接 -->\n      <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->\n      <router-link to=\"/\">Go to Home</router-link>\n      <router-link to=\"/about\">Go to About</router-link>\n    </p>\n    <!-- 路由出口 -->\n    <!-- 路由匹配到的组件将渲染在这里 -->\n    <router-view></router-view>\n  </div>\n</template>\n```\n\n## 添加router\n\nrouter/index.js\n\n```\nimport { createRouter, createWebHistory } from \"vue-router\";\nimport routes from \"./routes\";\n\nconst router = createRouter({\n  history: createWebHistory(),\n  routes,\n});\n\nexport default router;\n```\n\nrouter/routes.js\n\n```\nconst routes = [\n  { path: '/', component: () => import('../views/home/index.vue') },\n  { path: '/about', component: () => import('../views/about/index.vue') },\n]\n\nexport default routes\n```\n\n## 添加store\n\nstore/index.js\n\n```\nimport { createStore } from 'vuex'\n\nconst store = createStore({\n  state () {\n    return {\n      count: 0\n    }\n  },\n  mutations: {\n    increment (state) {\n      state.count++\n    }\n  }\n})\n\nexport default store\n```\n\n## 添加页面\n\nviews/home/index.vue\n\n```html\n<template>\n  <div>\n    {{ msg }} home {{ count }}\n    <button type=\"button\" @click=\"increment\">递增</button>\n    <HelloWorld msg=\"Hello World组件\" />\n  </div>\n</template>\n\n<script>\nimport { mapState, mapMutations } from 'vuex'\nimport HelloWorld from '../../components/HelloWorld.vue'\n\nexport default {\n  data() {\n    return {\n      msg: 'hello'\n    }\n  },\n  components: {\n    HelloWorld\n  },\n  computed: {\n    ...mapState(['count'])\n  },\n  methods: {\n    ...mapMutations(['increment'])\n  }\n}\n</script>\n```\n\nviews/about/index.vue\n\n```html\n<template>\n  <div id=\"popup\">about</div>\n  <teleport to=\"#popup\">\n    <strong>111</strong>\n  </teleport>\n  <p>{{ count }} {{ state.name }}</p>\n</template>\n\n<script>\nimport { ref, reactive } from \"vue\";\n\nexport default {\n  setup() {\n    let count = ref(0);\n    count.value++;\n\n    let state = reactive({\n      name: \"tom\",\n    });\n  }\n}\n</script>\n```\n\n## 添加组件\n\ncomponents/HelloWorld.vue\n\n```html\n<template>\n  <h1>{{ msg }}</h1>\n\n  <button @click=\"state.count++\">count is: {{ state.count }}</button>\n</template>\n\n<script>\nimport { reactive } from 'vue'\n\nexport default {\n  props: {\n    msg: String\n  },\n  setup() {\n    const state = reactive({ count: 0 })\n    return {\n      state\n    }\n  }\n}\n</script>\n\n<style scoped>\na {\n  color: #42b983;\n}\n</style>\n```\n\n## 脚本命令\n\n```\n{\n    \"scripts\": {\n        \"dev\": \"vite\",\n        \"build\": \"vite build\",\n        \"serve\": \"vite preview\"\n    },\n}\n```\n\n## 启动项目\n\n```cli\n$ npm run dev\n```"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看