VUE 通过脚手架工具（vue-cli）创建VUE项目

末蓝、 2023-02-13 11:18 16阅读 0赞

一、安装相关环境

### 安装 `npm`
    `npm` 全称为 `Node Package Manager`，是一个基于`Node.js`的包管理器，也是整个`Node.js`社区最流行、支持的第三方模块最多的包管理器。
    ```
    npm -v
    ```
     
    ### 由于网络原因 安装 `cnpm`
    ```
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    ```
     
    ### 安装 `vue-cli`
    ```
    cnpm install -g @vue/cli
    ```
     
    ### 安装 `webpack`
    `webpack` 是  `JavaScript` 打包器(module bundler)
    ```
    cnpm install -g webpack
    ```

二、创建vue项目

执行命令

![20200528170222245.png][]

进入本地浏览器如下页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx_size_16_color_FFFFFF_t_70][]

点击创建项目

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx_size_16_color_FFFFFF_t_70 1][]

点击 在此创建项目

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx_size_16_color_FFFFFF_t_70 2][]

包管理器选npm 剩下的默认即可

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx_size_16_color_FFFFFF_t_70 4][]

观看命令行中创建项目的进度

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx_size_16_color_FFFFFF_t_70 5][]

视频教程请参考：官网网址视频教程

[https://learning.dcloud.io/\#/?vid=14][https_learning.dcloud.io_vid_14]

[20200528170222245.png]: https://img-blog.csdnimg.cn/20200528170222245.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200528170310790.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200528170359201.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200528170426361.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200528170811680.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200528170909957.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200528171004266.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzA2MDQx,size_16,color_FFFFFF,t_70
[https_learning.dcloud.io_vid_14]: https://learning.dcloud.io/#/?vid=14