Vue-cli构建项目到手机调试

一、搭建环境

Vue-cli是Vue的脚手架工具。在使用vue-cli创建项目之前需要先下载好各种工具，建议使用命令行全局安装(-g)。

1. node.js

2. npm

然后建议安装一个淘宝镜像npm install -g cnpm --registry= https://registry.npm.taobao.org

3. 安装webpack

4. 安装vue-cli

检查以上各项是否安装成功， node/npm/webpack -v和vue -V(注意大写) 检测版本号即可。

二、 创建项目

1. 在硬盘上找一个文件夹存在项目，在cmd中找到该路径，输入vue init webpack vuetest (vuetest为自定义的项目名称）。之后需要输入一些项目的基本信息，Projece name...

2. 使用webstorm打开项目，假如一切正常，使用 npm run dev命令即可访问http://localhost:8080打开主页面。如果项目在启动过程中报错，一般情况下，是漏了一些依赖文件，可以通过命令行 cnpm i .. --save-dev 安装在本地即可。用此命令下载的文件名会生成在package.json文件的devDependencies项中。这样当多人开发的时候，不需要把庞大的node_modules文件夹放在公共文件夹中。使用npm install命令会自动下载本项目devDependencies所需要的依赖。

3. 几个小的知识点

1).

<router-link to="/first">Go to first</router-link

其中router-link标签会被解析成a标签，first是一个组件Component，需要在src->router->index.js中注册后才可以。

2).  在vue-cli中配置scss

cnpm i node-sass --save-dev
cnpm i sass-loader --save-dev
cnpm i sass-resources-loader --save-dev

     然后在用scss的地方

<style lang="scss" scoped=""></style>

3).  px2rem

npm i lib-flexible --save-dev
npm i px2rem-loader --save-dev

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

import 'lib-flexible/flexible.js'

在build->utils.js中

 const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

function generateLoaders (loader, loaderOptions) {
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
......

注意：remUnit： 75 为设计稿大小，可根据实际情况改变。重启后，在组件中直接用px单位，在浏览器中会自动转变为rem。

4. 使用命令 npm run bulid 将项目打包前，需要将config->index.js 中的

assetsPublicPath: './'

    共有2处，只需要修改 build中的，这样文件路径对了，页面就不会出现空白的情况。使用命令会生成dist文件夹。

注：在css中引入的图片可能会存在404的情况，只需要在build->utils中加入

publicPath: '../../'

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

5. 使用hbuilder在手机上运行项目

首先可以将hbuilder先更新到最新版。在hbuilder中打开项目的dist文件夹，并将其转化为移动APP，选择运行->真机运行即可。