vue的准备工作

1.检查是否已经安装了node和npm,确定node的版本是4.0以上

 

　　在命令窗口（windoes + R 键打开输入cmd确认）输入node -v 和npm -v,如果显示出版本号，说明安装成功

 

node -v

2.安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

如果安装失败，可以使用 npm cache clean清理缓存，然后再重新安装。

 

输入cnpm -v 查看是否安装成功，输入cnpm install -g vue-cli 安装vue-cli和webpack )

 

完成后输入vue -V(V大写)查看是否安装成功

 

若提示无法识别vue，可输入npm install -g npm 更新npm 版本

 

3.vue脚手架的安装

cnpm install -g vue-cli

4.查看可以安装哪些模板

vue list

5.根据模板初始化项目

vue init <template-name> <project-name>

eg: vue init webpack sell

6.安装相关依赖代码包

cnmp install

7.启动项目

npm run dev

 

8、vue项目的打包

大家都知道使用npm run build进行打包，这个时候你直接打开dist/下的index.html,会发现文件可以打开，但是所有的js，css，img等路径有问题是指向根目录的，

 此时需要修改config/index.js里的assetsPublicPath的字段，初始项目是/他是指向项目根目录的也是为什么会出现错误，这时改为./

注意：当路由使用mode:'history'模式，后端配置了路由去掉#时，不能使用以上行为，否则会导致除了根目录，其他地址无法访问！

 

HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

#后端配置例子

#Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

除了 mod_rewrite，你也可以使用 FallbackResource。

#nginx

location / {
  try_files $uri $uri/ /index.html;
}

#原生 Node.js

const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {
  fs.readFile('index.htm', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})

#基于 Node.js 的 Express

对于 Node.js/Express，请考虑使用 connect-history-api-fallback 中间件。

#Internet Information Services (IIS)

  1. 安装 IIS UrlRewrite
  2. 在你的网站根目录中创建一个 web.config 文件，内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

#Caddy

rewrite {
    regexp .*
    to {path} /
}

#Firebase 主机

在你的 firebase.json 中加入：

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

#警告

给个警告，因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

或者，如果你使用 Node.js 服务器，你可以用服务端路由匹配到来的 URL，并在没有匹配到路由的时候返回 404，以实现回退。更多详情请查阅 Vue 服务端渲染文档。

 

2、css中引用的图片资源找不到

我的login.vue文件中有一段css，其中引用了一个背景图片，是这样写的

1
.login{height:100%;background: url("../assets/login_bg.jpg") no-repeat; background-size: cover;color: white;}

“src/assets/”文件夹下有这张图片，打包后路径发生变化这个图片就找不到了，stackflow上有一个解决办法，很简单

打开“build/utils.js”，增加一行代码即可

 

 

1.下载lib-flexible

我使用的是vue-cli+webpack，所以是通过npm来安装的

cnpm i lib-flexible --save

2.引入lib-flexible

在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3.设置meta标签

通过meta标签，设置设备宽度以及缩放比例

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

4.安装px2rem-loader

cnpm install px2rem-loader --save-dev

5.配置px2rem-loader

这里是重要的一步~~

在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：

复制代码
const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }
复制代码

同时，在generateLoaders方法中添加px2remLoader

复制代码
function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader,px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
复制代码

6.重启，一切ok~

当配置完之后，只需要重启下服务，就自动转化为rem了

npm run dev

 

npm安装stylus和stylus-loader

cnpm install stylus-loader –save-dev

 

然后改了一下webpack的配置
在webpack.base.conf.js的module的loaders里加入了

{ 
  test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' 
}

在resolve的extensions里加入了.styl

extensions: ['', '.js', '.vue','.styl'][以上代码不需要！！！！]

项目创建报错：

This dependency was not found:

* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1d57e5ea","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vue in ./src/components/a.vue

To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1d57e5ea","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vue

解决方案：

npm install stylus-loader css-loader style-loader --save-dev

安装之后还会报错：

Module build failed: Error: Cannot find module 'stylus'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (E:\project\selling\node_modules\stylus-loader\index.js:2:14)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)

继续执行：

npm install stylus

然后执行 npm run dev 

解决

因此在首次初始化的时候需要进行如下步骤的安装

1.cnpm install stylus --save-dev

2.cnpm install stylus-loader --save-dev

3.cnpm run dev（每次改动了配置文件均需要重新启动项目）

 

Vue 2.0 + cordova 构建Android应用（一）

一、环境准备（Windows、Android）

1、官方安装参考

包括Java、Android SDK 及相关环境变量配置

2、Node.js

安装Node.js（主要是为了使用npm安装cordova、vue），当前选择稳定版6.9.x LTS 即可

3、Android SDK

建议直接下载安装Android Studio，当前版本2.2.2.0

选择包含 Android SDK 的安装包，安装完毕后打开SDK配置路径中的SDK Manager.exe，下载所需版本Android SDK Tool和对应SDK Platform，建议真机开发调试。

下载速度慢或无法下载，则使用代理，配置如下，或可使用其他代理路径

4、Cordova

参照官方指南首页，安装Cordova、配置已下载的SDK环境变量，并按照指南进行初步测试

cordova 相关命令参考：http://cordova.apache.org/doc...

注意命令中的各种默认设置

假设构建名为cordovaApp的项目

cordova create cordova-app com.lxlazy.www.app cordovaApp 
cd cordova-app 
cordova platforms add android

命令行提示项目中已默认安装 cordova-plugin-whitelist 插件。

检查整体环境是否正确，注意查看提示

cordova requirements

建议使用真机调试，记得打开USB调试模式

cordova run

注意：首次使用时，命令行提示 Downloading https://services.gradle.org/distributions/gradle-2.14.1-all.zip，是在下载对应的gradle并自动解压安装，根据网络状况，可能耗时极长，且容易报错。

windows环境下，在命令行窗口下载安装时，点击窗口内部，会使其暂停下载工作，有下载进度提示的时候才可以看出来。按下Esc键就能继续工作。坑我好几次。当然也可使用VSCode控制台代替。

也可使用以下方法：找到如 cordova-app/platforms/android/cordova/lib/buildersGradleBuilder.js，其中有

var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] ||'https\\://services.gradle.org/distributions/gradle-2.14.1-all.zip'

根据路径，使用迅雷等工具下载对应安装包，并修改上述语句中的外链为已下载好的路径，如，将gradle-2.14.1-all.zip放在了D盘根路径，则修改为

var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || 'file:///gradle-2.14.1-all.zip';

然后重新运行cordova build 或 cordova run

缺点是每新建一个工程就得改一遍，当然速度快多了

5、Vue.js

参照官方指南，使用官方脚手架 vue-cli 初步构建项目：http://vuejs.org/v2/guide/ins...

该项目将与之前的cordovaApp项目整合，假设为vueApp（默认使用vue-router、标准ESLint，不用测试模块，因为并不复杂）

vue init webpack vue-app
cd vue-app
cnpm install

只在下载包时使用cnpm命令加快下载速度，其他情况最好使用npm或 yarn（然而官网太难进），否则可能出现各种问题……

npm run dev

注意界面上的各种地址

6、Visual Studio Code

没什么好说的，相比 sublime text 而言，插件化定制等功能更加方面好用，而且免费

二、项目整合

即：将vue-app项目默认的构建位置dist目录修改为cordova-app项目中的www目录，并能够使用cordova命令直接运行在手机端

1、构建

给出vue项目构建需要修改的地方，如图所示

修改后，npm run build 会将工程打包到与 app-vue 项目同级的 app-cordova 项目下

└── www
    ├── css
    ├── fonts
    ├── img
    ├── js
    └── index.html

不知道为什么之前这样是报错的，需要把img文件夹移动到css文件夹下，后来莫名其妙就好了……

2、vue 本地调试

至少在index.html中添加

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

在浏览器运行后，打开控制台，切换成设备视图，跟普通html界面一样调试，开发模式下，可使用vue-devtools浏览器拓展插件获取有效界面信息。如图

3、Cordova 本机调试

将构建好的项目运行在手机端，USB连接手机，打开调试模式

注意：一切正常但还是安装出错，1、卸载之前的app；2、确认允许cordova安装。我没遇到过其他的了

打开 Chrome 浏览器，输入地址chrome://inspect，默认进入 chrome://inspect/#devices，将在页面显示当前可用设备，点击链接弹出控制台界面，然后跟普通页面一样调试

 
更多vue问题可以访问：https://segmentfault.com/a/1190000010191885

众所周知，iphoneX的面部识别功能很强大。但是在浏览器屏幕显示上，在观看上不会引起问题，但是在默认情况下会有一些显示问题。

1、因为正常情况下会有上下两个白色的边框，如果网页背景色不是白色或者其他单色的颜色会显得非常突兀，

解决方式：给body标签加上background-color，背景色为网页颜色。

2、如果你喜欢对设计有额外的控制，或者使用渐变或图像作为背景，那么设置背景颜色可能是不可行的。在苹果的iOS的最新版本增加了viewport-fit，全屏幕显示网页，在meta标签把viewport设定为

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

3、设置safe-srea-inset-*确保安全边界：

因为横屏时画面右侧会被那一块感应器给挡住，而Home Bar等空间由于保留给系统使用，链接也会失效，会造成体验不良的状况。Apple提供了几个CSSProperties来处理：

constant(safe-area-inset-top)

constant(safe-area-inset-right)

constant(safe-area-inset-bottom)

constant(safe-area-inset-left)

在设置viewport-fit后使用这几个css属性：

.container {
    padding-top: constant(safe-area-inset-top);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
}
就可以修正全屏时内容与系统保留区重叠的问题。
 

谷歌插件jsonview

 

git clone https://xxxxxxx 

git config --global user.name '你的git用户名'

git config --global user.email '你的git email'

 

git add .

git commit -m 'change'

git push

git checkout master

git merge origin/index-swiper

git push

 

git push

git checkout index-icons

posted @ 2018-04-26 09:54  前端开发-周先生  阅读(1686)  评论(0)  编辑  收藏  举报