使用vue@2.xx版本进行项目的搭建(1)

比眉伴天荒 2021-07-25 18:15 331阅读 0赞

# 查看电脑中是否安装有npm:cmd打开，输入 npm -v #

# 安装vue-cli脚手架2.xx版本：npm install -g vue-cli #

# 安装vue-cli脚手架3.xx版本：npm install -g @vue/cli #

# Vue-cli2.xx版本与3.xx版本的区别在于： #

2版本的内容显示的比较全，不需要自行配置，3.xx版本隐藏了一些配置文件。所以目前使用2.xx版本。

# 查看电脑中是否安装有vue-cli:输入vue -V即可。 #

# 安装完@vue/cli就是3.xx版本的脚手架后，如果想要使用vue-cli2.xx版本的脚手架，再去安装一遍是会报错的，提示：This package has been deprecated in favour of @vue/cli #

此时的处理方法就是：npm install -g @vue/cli-init  
//安装完后 就还可以使用 vue init 命令  
vue init webpack my\_project  
此时的webpack是项目搭建的模板名称。  
参考连接为：https://www.npmjs.com/package/vue-cli，需要去掉一部分内容才可以。

# Vue有个默认开启的代码检测，总是会提示报错，关闭的方法就是：直接禁用eslint和vetur即可实现。 #

# Vscode代码自动补全的处理方式：https://jingyan.baidu.com/article/215817f735e2675eda1423a5.html #

# 由于css文件是scss格式的，所以需要先处理成css文件，再形成style行间样式，需要在build文件夹中的webpack.base.conf.js文件中写入： #

`{ Test:/\.scss$/, Use:[‘style-loader’,’css-loader’,’sass-loader’] }`  
然后在cmd中进行下载所依赖的插件：npm install style-loader css-loader sass-loader node-sass -D回车即可。

# 安装sass-loader时报错。 #

`requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none is installed`.版本兼容问题

这是webpack版本不兼容引起的，重新安装正确版本的webpack  
`$ npm install webpack@x.x.x -g`

项目中添加了scss文件后，执行npm run dev报错，解决方法就是：

安装完成后还是报错，处理方法如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
通过以上的代码，解决了这个scss的问题。

# 在vscode开启ESLint的时候，页面中会出现各种各样的报错。 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]  
解决方法就是在：package.json文件中，eslint –fix (添加上 --fix);  
![在这里插入图片描述][20200410200423497.png]

然后在cmd中，执行 npm run lint;即可自动修复这些问题。  
如果以上的代码修复过程中报错，则需要在.eslintrc.js文件中，修改plugins:\[  
‘vuefix’\];原来为’vue’，现在修改为“vuefix”,修复vue文件时，需要下载eslint-plugin-vuefix插件。  
安装完成后，运行 npm run dev，提示报错：cannot find module ‘webpack’；此时的处理方法就是： npm install –save-dev webpack,安装完成后再进行npm run dev即可。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/0d510d3d9b744f19bf6e4c0e8c597a44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200410200332792.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020041020034948.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200410200358243.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200410200409417.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[20200410200423497.png]: https://img-blog.csdnimg.cn/20200410200423497.png