从零开始配置Vue项目(WebApp)

1. 组件初始化安装

全局安装 vue-cli

npm install –-global vue-cli

创建一个基于webpack模板的新项目

vue init webpack my-project

Runtime + Compiler — runtime-only （小于6kb，只能用 .vue开发）
EsLint—Y
Router—Y

无网络环境下，离线配置环境。使用打包好的webpack
Terminal进入当前用户文件夹下（如：C:\Users\82601 ）

mkdir .vue-templates    

(使用命令行才可以创建开头为 . 的文件夹)
复制打包好的webpack压缩包到此文件夹，并解压缩，然后回到需要创建vue项目的目录下

vue init webpack my-project --offline

安装依赖包

cd my-project
npm install
npm run dev

国内网络npm运行缓慢的话，安装淘宝cnpm

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

2. 各项配置

eslint配置
使用方法 npm run lint -- --fix

  "rules": {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 分号   永远要求分号  没有 报错
    'semi': ['error', 'always'],
    // 缩进  原生eslin不知道缩进怎么处理  就先把它关掉 然后下面自己写vue/script-indent
    'indent': 'off',
    // 基础缩进 1   倍数2   总共空2行
    'vue/script-indent': ['error', 2, {'baseIndent': 1}],
    // 函数括号前的空格   异步async函数和匿名函数 前面需要空格   命名过的函数 不需要
    'space-before-function-paren': ['error', {'anonymous': 'always', 'named': 'never', 'asyncArrow': 'always'}]
  }

config\index.js 配置
my-project\config\index.js

host: '0.0.0.0', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,    // 自动打开浏览器

本地调试的话 host: ‘host’, 即可，通过localhost:8080打开。
如果需要手机端调试。 设置 host: ‘0.0.0.0’,
然后获取计算机ip地址。 Terminal: ipconfig
例如：IPv4 地址: 10.0.0.88
手机和电脑通过 10.0.0.88:8080 来访问

fastclick

npm install –-save babel-polyfill fastclick

移动端点击之后会有300ms的延迟，fastclick可以解决这个问题

babel-polyfill

npm install --save-dev babel-polyfill

原生的babel只会将ES6的语法（如箭头函数）转化成低版本的语法，但是对于ES6的API只会原封不动的保留，同样无法在低版本设备适应。 babel-polyfill就是可以在全局范围内添加API。

index.html
真正的页面， 项目完成之后，会自动把所有内容注入进来

<link href="//gw.alicdn.com/tps/i2/TB1nmqyFFXXXXcQbFXXE5jB3XXX-114-114.png" rel="Shortcut Icon" type="image/x-icon">

写入网站标签头部图标

main.js 主入口
在此处引入这些资源

import 'babel-polyfill';
import Vue from 'vue'
import App from './App'
import router from './router'
import fastclick from 'fastclick'
import './config/rem'
import 'assets/scss/index.scss';
import 'swiper/css/swiper.css'
fastclick.attach(document.body);

.postcssrc.js
css的预处理相关
.gitignore
上传git忽视的部分
.eslintignore
eslint忽视拼写检查的部分
.editorconfig
编译器的配置文件 可以放到别的编译器，修改配置
.babelrc
兼容ES5 或其他低版本的ES的配置文件
static
webpack不会进行任何处理，发布的时候整个拷贝过去

npm install --save-dev node-sass sass-loader

build\webpack.base.conf.js
配置一些路径快捷表示

alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
  'api': resolve('src/api'),
  'assets': resolve('src/assets'),
  'base': resolve('src/base'),
  'components': resolve('src/components'),
  'pages': resolve('src/pages'),
}

assets/fonts
存放需要用到的图标字体

assets/scss
包含六个scss文件，五个待下划线的，不会被编译成css

1. _icon.scss 图标字体的scss，下载图标资源的时候包含，需要修改其中的路径
2. _reset.scss 取消所有默认样式 所有项目通用
3. _base.scss 取消本项目的一些默认样式
4. _mixin.scss 预先写好的mixin，例如：文字溢出样式
5. _variables.scss 预先写好的一些scss变量，如默认字体颜色大小 默认各个组件z-index
6. index.scss 不带下划线，调用其他带下划线的scss