vue自学教程-原创杂文-利志分享

vue自学教程

原创杂文 / 时间：2022-02-19 21:58:28 / 阅读：229 / 分享：0

##### vue开发环境搭建
---

安装node.js和npm。
1. npm安装vue脚手架vue-cli:npm install vue-cli -g // 全局安装
1. 接下来使用vue-cli创建一个项目，采用官方的webpack模板：vue init webpack demo
1. 进入demo项目，安装依赖(需要耐心等待一段时间):npm install
1. 启动开发服务器：npm run dev

在vue项目中如何配置favicon？
1. 将 favicon 图片放到 static 文件夹下用 vue-cli 搭建的Vue项目。
1. 然后在 index.html 中添加：<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">
1. 刷新浏览器页面。

---

**运行npm run dev 时报错npm run install --save !!vue-style-loader!css-loader?**

cnpm install stylus-loader
cnpm install css-loader
cnpm install style-loader
npm install sass-loader --save
npm install node-sass --save
npm uninstall less-loader
npm install less-loader@5.0.0 -D

都成功以后接着npm run dev就成功了

---
**当出现 npm ERR! ERESOLVE unable to resolve dependency tree这个错误**

解决：
npm i --legacy-peer-deps
npm i eslint-plugin-vue

---
**Vue中使用jquery**
1：安装
```
npm install jquery
```

在build/webpack.base.conf文件当中引入jquery

```
module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery')
    }
  },
  ...
}
```
3：

```
import $ from jquery //在需要使用的页面中

```

按时间分类