创建vuejs3项目详细步骤

朴灿烈づ我的快乐病毒、 2022-10-17 04:12 258阅读 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