创建vuejs3项目详细步骤 朴灿烈づ我的快乐病毒、 2022-10-17 04:12 198阅读 0赞 # vue官网教程:(就用这个) # 之前用菜鸟教程的命令得到的vue版本是2点几: **菜鸟上的教程讲的vue是相对比较旧版本的了. 你先明白`vue init webpack runoob-vue3-test`这个命令干啥的,参考[拉取 2.x 模板 (旧版本)][2.x _]. 看完以上vue cli文档你应该能明白这是使用一个模板新建一个vue项目对吧? 所以这个模板里的vue版本不是3.0,你创建的项目vue自然不是3.0的. 另外,你对webpack的理解有问题,webpack只是一个把项目文件进行静态打包的工具, webpack没办法给你装vue. 如果你希望学习较新的vue版本,建议直接看官方文档. [vue3中文文档][vue3]** 链接:[https://v3.cn.vuejs.org/guide/migration/introduction.html\#概览][https_v3.cn.vuejs.org_guide_migration_introduction.html] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70][] ## 1,安装脚手架@vue/cli ## ## 2,执行命令:vue create hello-vue3 选择vue3 ## npm install -g @vue/cli # 或 yarn global add @vue/cli vue create hello-vue3 # 选择 vue 3 preset ## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 1][] ## ## 3,cd hello-vue3 ## ## 4,npm run serve ## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 2][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 3][] 成功! ======================================================================== # 以下的别用!就用上面那个官网的!因为**这个模板里的vue版本不是3.0而是2** # # 我参考的是菜鸟教程+百度: # [https://www.runoob.com/vue3/vue3-install.html][https_www.runoob.com_vue3_vue3-install.html] 前提:自己要安装好了nodejs 设置npm cnpm等 然后开始正文: ## 1,先安装vue-cli脚手架: ## # 全局安装 vue-cli $ cnpm install -g @vue/cli # 安装完后查看版本 $ vue --version @vue/cli 4.5.11 ## 2,安装桥接工具(一定要安装这个) ## 如果不安装安装桥接工具的话。会报错: Command vue init requires a global addon to be installed. Please run yarn global add @vue/cli-init and try again. ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 4][] 安装方法: cnpm i -g @vue/cli-init ## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 5][] ## ## 3,用vue cli脚手架搭建项目: ## 命令:vue init webpack 项目名 这里需要进行一些配置,默认回车即可 vue init webpack runoob-vue3-test ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 6][] ## 4,进入项目,安装并运行: ## $ cd runoob-vue3-test $ cnpm run dev DONE Compiled successfully in 2558ms I Your application is running here: http://localhost:8080 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 7][] 安装成功! ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 8][] [2.x _]: https://cli.vuejs.org/zh/guide/creating-a-project.html#%E6%8B%89%E5%8F%96-2-x-%E6%A8%A1%E6%9D%BF-%E6%97%A7%E7%89%88%E6%9C%AC [vue3]: https://v3.cn.vuejs.org/guide/introduction.html [https_v3.cn.vuejs.org_guide_migration_introduction.html]: https://v3.cn.vuejs.org/guide/migration/introduction.html#%E6%A6%82%E8%A7%88 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70]: /images/20221014/0d591d08f65545fc98713d4df58a8c72.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 1]: /images/20221014/4a906f4a1caa43c2b0a0aae120e00021.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 2]: /images/20221014/de8baae73f8f4502bc976629fa94880e.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 3]: /images/20221014/48da2078ead044b4969873641130d9f3.png [https_www.runoob.com_vue3_vue3-install.html]: https://www.runoob.com/vue3/vue3-install.html [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 4]: /images/20221014/b9d89e91ce3f4bf2a069a39411716de4.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 5]: /images/20221014/697dc176dcc94206bb4be1c2f8c9acfc.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 6]: /images/20221014/fa6da952cf664b72b4da30e05151f159.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 7]: /images/20221014/c19abde4e9ba42d9b48ff59d03b16c67.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 8]: /images/20221014/82996d962f534c0a84ad7e5ae71bb6c8.png
还没有评论,来说两句吧...