vue3.0初体验-创建vue3.0实例

旧城等待， 2022-10-13 01:44 8阅读 0赞

### vue3.0初体验-创建vue3.0实例 ###

*  缘起
 *   *  工具
     *  操作步骤
     *  解决方案

# 缘起 #

缘分呐，就如古话所说：`古人学问无遗力，少壮工夫老始成。纸上得来终觉浅，绝知此事要躬行。`，看了一遍vue3.0的介绍及使用，总觉得自己也要来尝试一下，正碰上自己的网站更新`云墨染天下`模块，那就选他来试试手了。

## 工具 ##

1.  开发工具：WebStorm
2.  参考网站（vue-cli）：https://cli.vuejs.org/zh/guide/creating-a-project.html\#vue-create
3.  参考网站（vue）：https://v3.cn.vuejs.org/guide/instance.html

## 操作步骤 ##

1.  使用WebStorm新建项目，如下：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NjEzMzU_size_16_color_FFFFFF_t_70][]  
    创建之后结构如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NjEzMzU_size_16_color_FFFFFF_t_70 1]  
    然后运行项目，截图如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NjEzMzU_size_16_color_FFFFFF_t_70 2]  
    启动I效果如图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NjEzMzU_size_16_color_FFFFFF_t_70 3]

好了，完结撒花，哈哈。

## 解决方案 ##

重要是不是创建的过程，而是配置的过程，创建过程都是次要的。下面看几点需要注意的。

Q: export ‘default’ (imported as ‘Vue’) was not found in ‘vue’  
A: 执行如下命令：

yarn add vue@next
    yarn add @vue/compiler-sfc -D

Q: ‘Antd’ is defined but never used no-unused-vars  
A: 没有用到的引用，可以注销掉或者删除冗余代码。

Q:怎么引用组件？  
A:`注意版本问题`，例子（`antd的引用`）如下：

import Antd from 'ant-design-vue';
    createApp(App).use(Antd).mount('#app')

其他的还没怎么想起来，如果有别的问题，随时补充。

yarn安装命令：

yarn add ant-design-vue@^2.1.2

npm 安装命令：

npm install ant-design-vue@^2.1.2

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NjEzMzU_size_16_color_FFFFFF_t_70]: /images/20221005/682ebd7c671346cda0f9103372628706.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NjEzMzU_size_16_color_FFFFFF_t_70 1]: /images/20221005/74b04827aa314dd1b599342445bc2b32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NjEzMzU_size_16_color_FFFFFF_t_70 2]: /images/20221005/00952a43fd494e9a8a744dd4b35c31b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NjEzMzU_size_16_color_FFFFFF_t_70 3]: /images/20221005/8374ba98171a4215bd5c3d28ee30afb7.png