Vue2的vue-cli移动端完全版配置全集

本人会用vue2的api 但是一直对vu-cli一知半解所以这次借着项目开发要用一下网上搜索的很多配置vu-cli移动端的都有缺陷以下是我搜索到并且配置成功的所有相关资源合集参考以下内容即可配置成功移动端的vue-cli 每篇文章我都备注了出处方便大家关注原博主红色字体的是我配置过程中自己的一点理解我们开始吧~

2019.11.28 补充:我配置好这套后就存起来打算以后直接模板用但是昨天刚拿到就出现问题了我现在的电脑之前升级了webpack为4版本但是之前配置好的这个模板是webpack3版本就起了冲突我查到网上有很多cli2升级到webpack4的方法但是我配置了半天没能成功最后解决问题的办法就是把自己的环境换回3版本```

1 vue-cli

都说Vue2简单上手容易，的确，看了官方文档确实觉得上手很快，除了ES6语法和webpack的配置让你感到陌生，重要的是思路的变换，以前用jq随便拿全局变量和修改dom的锤子不能用了，vue只用关心数据本身，不用再频繁繁琐的操作dom，注册事件、监听事件、取消事件。。。。（确实很烦）。vue的官方文档还是不错的，由浅到深，如果不使用构建工具确实用的很爽，但是这在实际项目应用中是不可能的，当用vue-cli构建一个工程的时候，发现官方文档还是不够用，需要熟练掌握es6，而vue的全家桶(vue-cli,vue-router,vue-resource,vuex)还是都要上的。

vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resource，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。

vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。

1.安装vue-cli

① 使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack -g或者（npm install -g webpack），安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。

② 全局安装vue-cli，在cmd中输入命令:

npm install --global vue-cli

（我已经安装过，为了更直观我在电脑上重新演示下）

安装成功：

安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。

打开C:\Users\Andminster\AppData\Roaming\npm目录下可以看到：

打开node_modules也可以看到：

2.用vue-cli来构建项目

① 我首先在D盘新建一个文件夹（dxl_vue）作为项目存放地，然后使用命令行cd进入到项目目录输入：

vue init webpack baoge

baoge是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹。

输入命令后，会跳出几个选项让你回答：

Project name (baoge)： -----项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters），阮一峰老师博客为什么文件名要小写，可以参考一下。
Project description (A Vue.js project)： ----项目描述，也可直接点击回车，使用默认名字
Author ()： ----作者，输入dongxili
接下来会让用户选择：
Runtime + Compiler: recommended for most users 运行加编译，既然已经说了推荐，就选它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时，已经有推荐了就选择第一个了
Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。
接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，直接y回车
Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，我选择安装y回车
Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试，我选择安装y回车

回答完毕后上图就开始构建项目了。

② 配置完成后，可以看到目录下多出了一个项目文件夹baoge，然后cd进入这个文件夹：

备注：最好先用IDE打开这个文件再npm install 否则启动时候会很慢
安装依赖：

npm install

( 如果安装速度太慢。可以安装淘宝镜像，打开命令行工具，输入：
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后使用cnpm来安装 )

npm install ：安装所有的模块，如果是安装具体的哪个个模块，在install 后面输入模块的名字即可。而只输入install就会按照项目的根目录下的package.json文件中依赖的模块安装（这个文件里面是不允许有任何注释的），每个使用npm管理的项目都有这个文件，是npm操作的入口文件。因为是初始项目，还没有任何模块，所以我用npm install 安装所有的模块。安装完成后，目录中会多出来一个node_modules文件夹，这里放的就是所有依赖的模块。

然后现在，baoge文件夹里的目录是这样的：

解释下每个文件夹代表的意思(仔细看一下这张图）：

image.png

3.启动项目

npm run dev

备注：如果想要npm run dev后浏览器自动打开不用手动去打开就在config文件夹下的index.js文件中修改 autoOpenBrowser：true 就可以了

如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config里的index.js

还有，如果本地调试项目时，建议将build 里的assetsPublicPath的路径前缀修改为 ' ./ '（开始是 ' / '），因为打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。
我的端口没有被占用，直接成功（服务启动成功后浏览器会默认打开一个“欢迎页面”）：

注意：在进行vue页面调试时，一定要去谷歌商店下载一个vue-tool扩展程序。

4.vue-cli的webpack配置分析

从package.json可以看到开发和生产环境的入口。
可以看到dev中的设置，build/webpack.dev.conf.js，该文件是开发环境中webpack的配置入口。
在webpack.dev.conf.js中出现webpack.base.conf.js，这个文件是开发环境和生产环境，甚至测试环境，这些环境的公共webpack配置。可以说，这个文件相当重要。
还有config/index.js 、build/utils.js 、build/build.js等，具体请看这篇介绍：
https://segmentfault.com/a/1190000008644830

5.打包上线

注意，自己的项目文件都需要放到 src 文件夹下。
在项目开发完成之后，可以输入 npm run build 来进行打包工作。

npm run build

另：

1.npm 开启了npm run dev以后怎么退出或关闭？
ctrl+c
2.--save-dev
自动把模块和版本号添加到模块配置文件package.json中的依赖里devdependencies部分
3. --save-dev 与 --save 的区别
--save     安装包信息将加入到dependencies（生产阶段的依赖）
--save-dev 安装包信息将加入到devDependencies（开发阶段的依赖），所以开发阶段一般使用它

打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看。
项目上线时，只需要将 dist 文件夹放到服务器就行了。

好了，史上最详细版vue2脚手架出炉了，由于是全家桶第一篇，所以过于详细，后面我只会写关键步骤，多加入点实例。[微笑]

作者：东西里
链接：https://www.jianshu.com/p/32beaca25c0d
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

2 vue-cli安装bootstrap框架

1、打开项目所在文件夹的cmd输入指令
npm install bootstrap --save-dev
2、在 main.js 文件中配置bootstrap

image.png

3、重新启动服务器（一般会报错，根据报错给出的指令安装缺少的依赖）

如：

4、安装缺少的依赖

5、重新启动服务器

完成

原文链接：https://www.jianshu.com/p/6c06b490e25d

3 vue-cli中如何引入jquery

前言

　　虽然vue不推荐直接操作DOM，而且也提供了操作DOM的方式。但是在某些时候还是要用到jquery(囧)，那么如何在使用vue-cli的时候引入jquery呢？

安装

　　国内镜像 cnpm 安装

cnpm install jquery --save-dev

配置

　　webpack有providePlugin插件，可以自动引入模块。所以需要在项目工程的webpack.base.config.js中添加以下配置：

const webpack = require('webpack')plugins: [new webpack.ProvidePlugin({  //引入Jquery$: 'jquery',jQuery: 'jquery','window.jQuery':'jquery'})]

解决报错

　　加入以上配置之后，再项目文件中使用'$'，发现还是会报错 --- eslint报错

　　eslint认为没有声明，需要在eslintrc.js中加入globals配置

  globals: { '$': false,'jquery': false}

　　这样就可以正常调用‘$’了

备注：修改配置后要停掉项目，重新启动才会生效。jquery使用时候放在$(function())里面！虽然我也不知道问什么感觉和生命周期有关吧

原文链接：https://www.cnblogs.com/shapeY/p/7717583.html

4 vue-cli中配置sass

如何配置sass

一、安装对应依赖node模块：

1 2	`npm install node-sass --save-dev` `npm install sass-loader --save-dev`

二、打开webpack.base.config.js在loaders里面加上

 1 rules: [2       {3         test: /\.vue$/,4         loader: 'vue-loader',5         options: vueLoaderConfig6       },7       {8         test: /\.js$/,9         loader: 'babel-loader',
10         include: [resolve('src'), resolve('test')]
11       },
12       {
13         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
14         loader: 'url-loader',
15         query: {
16           limit: 10000,
17           name: utils.assetsPath('img/[name].[hash:7].[ext]')
18         }
19       },
20       {
21         test: /\.scss$/,
22         loaders: ["style", "css", "sass"]
23       },
24       {
25         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
26         loader: 'url-loader',
27         query: {
28           limit: 10000,
29           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
30         }
31       }
32     ]
33   }

三、在用scss的地方写上

1	`<style la`ng=`"scss"` `scoped=""` `type="text/css"></style>`

原文链接 https://www.cnblogs.com/rainheader/p/6505366.html

5 基于vue-cli配置移动端自适应

移动端自适应：手淘的 lib-flexible + rem

配置 flexible

安装 lib-flexible

在命令行中运行如下安装：

`1`	`npm i lib-flexible --save`

引入 lib-flexible

在项目入口文件 main.js 里引入 lib-flexible

1
2

// main.js
import 'lib-flexible'

添加 meta 标签

在项目根目录的 index.html 中添加如下 meta

`1`	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`

px 转 rem

实际开发中，我们通过设计稿得到的值单位是 px，所以要将 px 转换成 rem 再写进样式中。
将 px 转换成 rem 我们将使用 px2rem 这个工具，它有 webpack 的 loader：px2rem-loader

安装 px2rem-loader

在命令行中运行如下安装：

`1`	`npm i px2rem-loader --save-dev`

配置 px2rem-loade

在 vue-cli 生成的 webpack 配置中，vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。

我们只需在 cssLoader 后再加上一个 px2remLoader 即可，px2rem-loader 的 remUnit 选项意思是 1rem=多少像素，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10，这里我们假设设计稿宽为 750px。

// utils.js
var cssLoader = {loader: 'css-loader',options: {minimize: process.env.NODE_ENV === 'production',sourceMap: options.sourceMap}
}var px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 75}
}
// ...

并放进 loaders 数组中

// utils.js
function generateLoaders(loader, loaderOptions) {var loaders = [cssLoader, px2remLoader]// ...

修改配置后需要重启，然后我们在组件中写单位直接写 px，设计稿量多少就可以写多少了，舒服多了。

原文地址：https://www.cnblogs.com/tuspring/p/10303768.html

备注：rem与px是10倍的关系

记得将lib-flexible文件中的540改为750 否则按照750图做的时候会发现最大宽度只有540 会感觉很奇怪这是因为这个插件制作者考虑到手机屏幕最大宽度也就是差不多540所做的限制

6 Vue移动端项目如何使用手机预览调试

最近在开发移动端Vue移动端项目，查了一些资料，这里分享下如何在webpack工具构建下的vue项目，在手机端调试和预览，言归正传。

1.电脑和手机连接到同一个WIFI

a.台式电脑和手机同时链接一个路由器，使用同一个wifi；

b.笔记本也可以直接启用一个wifi，手机链接笔记本wifi也可以；

2.查询本地IP地址

WIN+R，输入cmd回车，打开命令提示符，输入ipconfig，查看本地IPv4；

3.修改本地项目中IP地址

找到项目中config文件夹，下面index.js文件打开；

找到host: ‘localhost’, 改为上面本地IPv4地址；

module.exports = {
dev: {
host: '192.168.0.107', // 原为: hotst: 'localhost'
}
}

4.制作二维码备注：谷歌浏览器的话在谷歌市场上配置二维码

借助草料二维码生成修改后项目地址的二维码，https://cli.im/

5.重新启动项目

重新启动项目，然后浏览器地址输入本机地址http://192.168.0.107:8080 访问项目PC端项目；
然后，手机微信扫描二维码就可以访问啦！

原文链接：https://blog.csdn.net/Lynn_yu/article/details/79912854

7 在vue-cli项目里使用vuex,vuex的详细使用

之前写过很多vue项目，项目中使用过vuex，那个时候看vuex愣是云里雾里，都是照葫芦画瓢使用，没有清楚弄明白，

今天再看一下文档，感觉茅塞顿开，特别写下来，给需要的人借鉴

一，什么是vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

官方文档是这么说的，反正我是没看明白

以自己的话说vuex是一个把多个组件通用的数据我们把它拿出来，放到一个叫store里面管理，在需要使用的组件里，我们可以拿出来使用

简单来说就是data的共享属性

二，关于store

“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

暂时先把state当成我们通用data来看吧，这样就好理解咯~

三，关于State

state就是我们项目全局通用的data属性，并且这些属性是响应式的，也就是说当属性发生改变时，state是会动态响应的

四，关于Getter

Getter可以使我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数等

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，

getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

五，关于Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

五，关于Action

Action 类似于 mutation，不同在于（划重点哦，很多面试官会问哒~）：

1，提交的是 mutation，而不是直接变更状态。

2，可以包含任意异步操作。

六，关于Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

七，如何使用

我们讲了那么多理论知识，那实际情况我们如何使用呢，一起来看吧：

首先是安装

（1）npm install vuex --save

（2）新建仓库

在src目录下新建一个文件夹，我们命名为store好了，然后在该文件夹下面创建一个js文件，我们还是叫他store好啦,截图看起来更方便哦

然后开始在main.js引入

安装和引入都好了，我们来玩玩吧

在刚刚建的store文件里

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

我们存两个变量来看看

找个页面，在creat里打印一下this

creat（）{

console.log(this)

}

嗯，找到我们刚刚创建的仓库啦

来看看仓库里面有什么吧

看到我们定义的state和mutation咯

那我们怎么拿到数据呢？

我们都可以打印出来，聪明的你应该不会被难倒吧

1，举个例子我们来拿state的name吧

creat（）{

console.log(this.$store.state.name)

}

看，数据打印出来啦，是不是超级简单

数据拿到了，我想改变他怎么办？别担心，我们有mutation

这是我们之前定义的方法

在其他页面我们写个function吧

然后在data里定义msg的值吧

然后我们调用changeName

看到了吗我们的数据改变咯

这里只是简单介绍了vuex,带领大家入门，详细的还是去撸官方文档吧，再见~

原文链接：https://www.jianshu.com/p/cba77015cd47