【Vue 】安装脚手架创建第一个项目

Myth丶恋晨 2023-10-11 12:47 54阅读 0赞

Y  
先做一些准备工作和其他说明，安装vue-cli 的时候有时候也许会报错，这个多半是因为node版本过低，请尽量使用较新版本。  
我安装时用的 cnpm 命令，是淘宝的 NPM 镜像，详细可参考：https://npm.taobao.org/  
简单安装就一局：

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后开始搭建项目：

1、安装 vue-cli ，执行以下命令：

DEMO
    cnpm install -g vue-cli

如下图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70]  
安装完成后，进入项目文件夹，输入命令：vue init webpack ， 如下：

vue init webpack

这里会有一些配置信息，可按照个人的需求来设置；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70 2]  
目录安装完成~

--------------------

个人的电脑上已经安装过一些模块了，所以到这里输入 “npm run dev” 就可以直接跑起来了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70 3]

--------------------

没有安装过任何依赖的童鞋需要需要执行以下命令来进行安装：

cnpm install

--------------------

安装完成后就可直接输入 npm run dev 来执行项目了：  
（一般情况下默认打开的页面是SRC 里面的 app.vue 文件,先来做一点改动）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70 4]  
路由配置在 src / router /index.js 配置一下, 使用 **Vue.use()** 加载插件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70 5]  
之前已经执行过 “npm run dev”，这里就不用重复执行了，页面也不用按F5, 自动就刷新了。  
完成：

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019092318190798.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190923182244128.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190923182447389.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190923183106948.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190926144739878.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20190926154835785.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20190926155313609.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ==,size_16,color_FFFFFF,t_70