vue-cli初次使用过程

女爷i 2023-07-17 14:21 12阅读 0赞

### vue-cli初次使用过程 ###

*   *   *  介绍
         *  创建一个项目
         *  使用gitbash
         *  可视化管理
         *  目录结构

### 介绍 ###

*  [官网][Link 1]
 *  Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统
 *  npm 安装

npm install -g @vue/cli

*  查看版本 vue --version  
    ![在这里插入图片描述][20200322154315975.jpg]

### 创建一个项目 ###

vue create hello-world

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70]

*  创建成功  
    ![在这里插入图片描述][20200322155337842.jpg]

### 使用gitbash ###

*  先创建~/.bashrc  
    ![在这里插入图片描述][20200322183733131.jpg]
 *  输入

alias vue='winpty vue.cmd'

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70 1]

*  命令模式输入wq,保存退出
 *  跟上面的命令创建一样

### 可视化管理 ###

*  进入界面

vue ui

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70 2]

*  创建  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70 3]
 *  管理界面  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70 4]\#\#\# 运行项目

npm run serve

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70 5]

*  浏览器地址栏输入：http://localhost:8080/  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70 6]

### 目录结构 ###

[Link 1]: https://cli.vuejs.org/zh/guide/
[20200322154315975.jpg]: /images/20230528/23269555bf354f56be7c13c2ee2a1035.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70]: /images/20230528/24e1a00aada7448fba4838ae8ef55be9.png
[20200322155337842.jpg]: /images/20230528/282063e4e96745ffa33f3eb8c5169b14.png
[20200322183733131.jpg]: /images/20230528/32357313b5ce4b9baf394816d6fe5afc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70 1]: /images/20230528/415cb59678c64d9d8fa2fee7152238de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70 2]: /images/20230528/d0fb66ff66d54032b91f6f1368bf4bcc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70 3]: /images/20230528/4c66fc9f04b14c11b5a308b97853d111.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70 4]: /images/20230528/61aa58add5f945e088f38469bc9d7e32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70 5]: /images/20230528/a0c34c9fbb3c46c09f6d12455ff0c595.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70 6]: /images/20230528/5f69c56014a14340ae22efcf2623540e.png