本人会用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模块：

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

 1 rules: [
 2       {
 3         test: /\.vue$/,
 4         loader: 'vue-loader',
 5         options: vueLoaderConfig
 6       },
 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的地方写上  

原文链接  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。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 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 数组中

1
2
3
4

// 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地址；

1. module.exports = {

2. dev: {

3. host: '192.168.0.107', // 原为: hotst: 'localhost'

4. }

5. }

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