Vue---通过vue-cli(vue脚手架)初始化创建Vue项目

傷城~ 2023-02-10 11:29 202阅读 0赞

**注：本机需要先安装node.js，才能使用vue-cl脚手架创建vue(Vue版本：2)项目。**

**1.安装vue-cli(现在最新版本：@vue/cli 4.3.1)**

#查看 vue-cli 版本
    vue -V
    
    #卸载vue-cli
    npm uninstall vue-cli -g
    
    #安装最新版本vue-cli
    npm install @vue/cli -g

**2.创建Vue项目**

#创建一个项目，项目名bond-monitoring-platform
    vue create bond-monitoring-platform

**3.进行项目配置**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70 1][]

![20200520213505613.png][]

![20200520213520677.png][]

![20200520213536152.png][]

** 4.进入项目，安装配置**

#进入项目
    cd bond-monitoring-platform
    
    #安装配置
    npm install

**5.项目运行**

#运行项目
    npm run serve

**6.项目打包(构建)**

#项目打包
    npm run build

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200520213428188.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020052021345176.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5,size_16,color_FFFFFF,t_70
[20200520213505613.png]: https://img-blog.csdnimg.cn/20200520213505613.png
[20200520213520677.png]: https://img-blog.csdnimg.cn/20200520213520677.png
[20200520213536152.png]: https://img-blog.csdnimg.cn/20200520213536152.png