使用Vue脚手架构建项目

布满荆棘的人生 2023-06-15 04:53 10阅读 0赞

使用Vue脚手架构建Vue项目

## 第一步在本机安装好Nodejs环境 ##

下载地址：[https://nodejs.org/en/download/][https_nodejs.org_en_download]  
安装完成后打开cmd管理员，输入node -v,npm-v查看是否安装成功!  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5_size_16_color_FFFFFF_t_70 1]  
如果这个已经成功那就j继续安装webpack和vue-cli  
接下来先安装淘宝镜像，以后下载npm依赖就不需要去国外网站下载可以直接转到阿里云下载。（类似于maven）

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

如果不行的小伙伴也没关系，下面可以选择npm安装的方式。

## CNPM安装： ##

安装webpack

cnpm install -g webpack

cnpm install -g webpack-cli

安装 vue

cnpm install -g vue

cnpm install -g vue-cli

## NPM安装 ##

安装 webpack

npm install -g webpack

npm install -g webpack-cli

安装vue

npm install -g vue

npm install -g vue-cli

然后再继续查看

vue -V

webpack -v

![在这里插入图片描述][20191120145553173.png]![在这里插入图片描述][20191120145606342.png]  
这样代表都安装成功啦!

## 搭建vue项目 ##

新建一个文件夹打开cmd  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5_size_16_color_FFFFFF_t_70 2]  
然后输入vue init webpack 项目名（我这里是vuedemo01）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5_size_16_color_FFFFFF_t_70 3]  
接下来输入你自己项目名，项目描述，作者…也可以一直回车，默认选项。  
cd到你新建的项目里面

cd vuedemo01

npm install或者cnpm install  
此时有可能会出以下bug:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5_size_16_color_FFFFFF_t_70 4]  
解决方案1:  
在项目路径的cmd输入：

npm audit fix

npm audit fix --force

npm audit

方案2：  
删除已经安装的：node\_modules 和 package-lock.json  
修改 package.json 格式如下  
npm audit fix --force  
npm instal

## 启动项目 ##

如果都可以了的话就可以开始运行你的vue项目了。

npm run dev

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5_size_16_color_FFFFFF_t_70 5]  
现在可以打开你的浏览器查看这个端口:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5_size_16_color_FFFFFF_t_70 6]  
可以看到已经访问成功啦！

[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191120141924906.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191120141941926.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5,size_16,color_FFFFFF,t_70
[20191120145553173.png]: https://img-blog.csdnimg.cn/20191120145553173.png
[20191120145606342.png]: https://img-blog.csdnimg.cn/20191120145606342.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191120150126982.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2019112015024769.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191120150929363.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191120151234432.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191120151319455.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDE1NTc5,size_16,color_FFFFFF,t_70