webpack+vue搭建编写（二）

朱雀 2023-06-15 11:26 18阅读 0赞

还有一种快速搭建项目的方法：

安装好nodejs 和webpack&webpack-cli前提下：

npm install --g vue-cli

***使用语句创建 ：***

vue init webpack myproject(项目目录名称)

之后回车：会出现如下内容：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70][]

*** ***此方法创建的包资源：***[资源包下载][Link 1]***

***使用图形界面创建项目：***

选择一个要创建的文件夹下：

>vue ui

![20191122160222340.png][]

浏览器会自动打开页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 1][]

可以根据需要提示自动创建项目

图形界面创建的资源包：图形界面资源包

用视图界面创建项目是没有搭建webpack的 ，之后可以手动添加

npm init -y
    npm install webpack webpack-cli --save-dev

之后可以在

![20191125111626478.png][]

依赖包中查看到添加成功的包

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191122141946285.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk=,size_16,color_FFFFFF,t_70
[Link 1]: http://download.csdn.net/download/woyizhizaizhaoni/11990456
[20191122160222340.png]: https://img-blog.csdnimg.cn/20191122160222340.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191122160313287.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk=,size_16,color_FFFFFF,t_70
[20191125111626478.png]: https://img-blog.csdnimg.cn/20191125111626478.png