使用vue-cli 构建一个项目

一.搭建环境

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

1. node.js 

2. npm

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

3. 安装vue-cli  

cnpm install vue-cli -g

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

最新的 vue 项目模板中，都带有 webpack 插件，所以这里可以不安装 webpack

二.生成项目

1.首先需要在命令行中进入到项目目录

 然后使用 webpack模板创建一个新的vue项目

vue init webpack name  

注意：

Use ESLint to lint your code? (Y/n) 这一步选no

选yes的话 ，缩进不规范，分号不需要等等，后期编译项目会报错 

2. 进入项目 使用cnpm安装项目依赖

进入项目

 然后 cnpm install    安装依赖

3.启动项目 npm run dev 

4.项目打包 npm run build

会生成dist文件夹

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

如果要在手机上运行 需要将config->index.js 中

assetsPublicPath: '/' 的路径改为 assetsPublicPath: './' 

注意：  共有2处，只需要修改build中的，这样页面就不会出现空白的情况

注：在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)  
    }  

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

注意：如果vue做移动端适配

还需要配置以下工具：

一：px2rem

1.借助px2rem 插件将px单位转为rem

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

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

import 'lib-flexible/flexible.js'

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

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }    

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

同时，在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader, px2remLoader] //px转换成rem
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
}

4.重启项目 你会发现px转换成了rem

二：scss配置

1.安装

cnpm install --save-dev node-sass
//sass-loader依赖于node-sass
cnpm install --save-dev sass-loader

安装好sass之后，想要在组件中使用全局变量

npm i sass-resources-loader --save-dev

2.如果需要在vue文件style标签使用scss的话，需要声明一下：

<style lang="scss" scoped="" type="text/css"></style>