vue全家桶学习

最新推荐文章于 2024-09-21 15:37:08 发布

Ziskaa

最新推荐文章于 2024-09-21 15:37:08 发布

阅读量3.5k

点赞数 13

分类专栏：前端踩坑

本文链接：https://blog.csdn.net/Ziskaa/article/details/94205631

版权

前端踩坑专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue 全家桶学习踩坑

一、安装vue,并且搭建脚手架

第一坑

使用npm 进行初始化，然后安装了vue和vue-cli，运行下列命令的时候发现“vue不是内部或外部命令”

vue init webpack vue-demo

解决方法：在我的电脑–属性–高级属性–环境变量中，找到npm的位置，在path中添加“%NPM%\bin”
或者
在 c 盘里搜索 vue.cmd；如果有修改安装位置，在修改后的盘符里搜索；也可以全局搜索：右键选择“打开文件所在目录”，将该目录添加至系统环境变量path中

第二坑
运行

vue init webpack vue-demo

发现
在这里插入图片描述原因：这里的vue安装的是3.0+版本，在2.x版本中使用vue init webpack hello-world 已经替换为3.x版本中的 vue create hello-world。

官方文档上说 Vue CLI 2 是被 Vue CLI 3 覆盖的。如果你仍然需要使用旧版本的 vue init 功能还是可以实现的，只需要使用以下命令：

在这里插入图片描述第三坑
打开vue源代码chapter1中的App.vue运行以下命令

npm start

出现错误
在这里插入图片描述前往项目根目录删除node_modules文件夹，然后在项目根目录路径下的终端运行"npm install"等待安装完之后，再次运行“npm run dev”，有些人的是马上就可以了，然而往往还会有人（譬如我）仍然报类似的错误，这个时候你只需要再次重复相同的操作即可，“一次不成再删再安装”！！！
第四坑
npm run dev 报错：missing script:dev
应该在正确的路径下运行此命令
借鉴：https://blog.csdn.net/dt1991524/article/details/82985570

第五坑
进入正确路径后运行npm run dev出现如下错误
Expected indentation of 0 spaces but found 4
Missing space before function parentheses
是缩进和空格不正确
根据代码修改即可

第六坑
运行 npm run dev出现：

You may use special comments to disable some warnings.

vue-cli脚手架关闭eslint的步骤：
1.打开 build文件夹下面的webpack.base.conf.js;
2.找到下面这段代码，并将它注释掉：

const createLintingRule = () => ({
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],
    options: {
        formatter: require('eslint-friendly-formatter'),
        emitWarning: !config.dev.showEslintErrorsInOverlay
    }
})

重启项目。
正常情况下这样就可以解决了。

第七坑需要用axios实现跨域需求，在proxytable进行代理设置后刷新浏览器显示404错误
解决方案：重启服务器，关闭当前项目

第八坑使用transition做过渡效果无效，原因是只写了v-enter-active的样式，没写v-enter的样式

第九坑使用axios后发现数据没有渲染到页面上
解决方案：把mockServer的service用nodejs打开

第十坑 vue中如何使用less
step1:安装依赖npm install less less-loader --save
step2:修改webpack.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加