vue-cli项目安装相关依赖包

一、用hbulider新建vue项目

在这里插入图片描述

不能使用npm run dev来运行项目，
因为在package.json中丢失了dev，强制运行会报错。
在这里插入图片描述
此时有两种做法是：

1.（不推荐）：

npm run buid
npm run serve

若通过方法一运行，则每次均使用该命令，并且需要自己安装router等

npm run serve

2. 安装webpack（一劳永逸)

vue init webpack -g

二、通过vue-cli创建

vue init webpack vueCommonPro //vueCommonPro 为自定义名字
进入项目后，用命令npm i安装依赖

三、安装所需包(按需）

1.安装jquery

npm install --save-dev jquery

引入jquery
在build -> webpack.base.conf.js中添加

//文件的最顶上添加
const webpack = require('webpack')

// node模块后面添加以下代码
  plugins:[
	  new webpack.ProvidePlugin({
		  $: "jquery",
		  jQuery:"jquery",
		  "windows.jQuery": "jquery"
	  })
  ]

在main.js中引入$

import $ from 'jquery'

new Vue({
  el: '#app',
  router,
  $, // 添加$
  components: { App },
  template: '<App/>'
})

2.安装elementui

npm i element-ui -S

在main.js中引入elementUI

2.1 全部引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2.2 按需引入

在main.js中

import 'element-ui/lib/theme-chalk/index.css';
import element from '@/element/index'
Vue.use(element)

新建element-> index.js 文件

// 导入自己需要的组件
import { Select, Loading, Checkbox} from 'element-ui'
const element = {
  install: function (Vue) {
    Vue.use(Select)
    Vue.use(Loading.directive);
    Vue.use(Checkbox);
  }
}
export default element

3.安裝normalize.css（样式重置）

保留有用的浏览器默认值，而不是删除它们。
规范化各种HTML元素的样式。
纠正常见的和浏览器不一致的错误。
通过微妙的改进提高可用性。
使用注释和详细文档解释代码。

安装命令

npm i normalize.css --save-dev

在main.js中引入

import 'normalize.css/normalize.css' // 重置全局css样式

4.安装axios

npm i axios --save

在main.js中引入axios

import axios from 'axios'

5.安装qs

将对象序列化，多个对象之间用&拼接（qs.stringify(params))
将序列化的内容拆分成一个个单一的对象（qs.parse(params))

npm install qs

在需要发送网络请求对字符进行格式转换的地方使用

import qs from 'qs'

6 安装sass less相关

6.1 安装依赖

安装node-sass :

npm install node-sass --save-dev

安装sass-loader :

npm install sass-loader --save-dev

安装style-loader:

npm install style-loader --save-dev

安装完成后，运行时出现了错误

Modele build failed: TypeError: this.getResolve is not a function at Object.loader...

这是因为当前sass的版本太高，webpack编译时出现了错误，这个时候只需要换成低版本的就行，下面说一下修改方法，很简单，如下，找到package.json文件，里面的 "sass-loader"的版本更换掉就行了。

我本地是将 "sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1",

这时候重新跑项目，就运行成功了。

也可以先卸载当前版本，然后安装指定的版本

卸载当前版本 npm uninstall sass-loader
安装 npm install sass-loader@7.3.1 --save-dev

6.2. less scoped相关报错

vue-style-loader !css-loader错误
在这里插入图片描述
解决：

如果是常规的，执行
npm install stylus-loader css-loader style-loader --save-dev依赖就行。
如果是 less 的，执行 npm install less less-loader --save-dev 安装依赖就行。
如果是 sass 的，执行 npm install sass sass-loader --save-dev 安装依赖就行。

7. 移动端适配

移步移动端rem适配

四、更改相关配置

4.1 打包配置

1、config文件夹下–>index.js文件
将 assetsPublicPath: '/', 更改为 assetsPublicPath: './',
2、build文件夹下–>utils.js文件
在if (options.extract) { }中添加 publicPath: '../../'

4.2 alias配置

当项目庞大，目录结构复杂时，方便引用。
在webpack.base.conf.js文件中，找到

alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
}

可以自定义指代字符，如

'api': resolve('src/api'),
'router': resolve('src/router')

使用时，在任意地方都可以通过import getArticle from 'api/article'来引入

来源：CSDN

作者：FutureLilian

链接：https://blog.csdn.net/FutureLilian/article/details/103511248

标签

vue-cli

Webpack