Vue CLI 学习笔记

绝地灬酷狼 2023-02-16 04:15 54阅读 0赞

### Vue CLI 学习笔记 ###

*  安装
 *  创建一个项目
 *   *  命令行创建
     *  UI界面创建
 *  安装插件
 *  参考资料

# 安装 #

装过旧版 vue-cli (1.x 或 2.x)，先`npm uninstall vue-cli -g` 卸载。

npm install -g @vue/cli

检查安装版本是否正确

vue --version

![在这里插入图片描述][20200607231427217.png]

# 创建一个项目 #

## 命令行创建 ##

vue create hello-world

*  选取一个 preset![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70]
 *  完成提示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 1]

## UI界面创建 ##

vue ui

支持中文，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 2]

# 安装插件 #

![在这里插入图片描述][20200607235856849.gif]

# 参考资料 #

[Vue CLI][]

[20200607231427217.png]: https://img-blog.csdnimg.cn/20200607231427217.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200607232315159.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200607232651917.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200607232807205.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw,size_16,color_FFFFFF,t_70
[20200607235856849.gif]: https://img-blog.csdnimg.cn/20200607235856849.gif
[Vue CLI]: https://cli.vuejs.org/zh/guide/