菜鸟新手入门：vscode下vue脚手架开发入门流程

脚手架设置

脚手架安装

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

可用模板：

1. webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
2. webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
3. browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
4. browserify-simple - A simple Browserify + vueify setup for quick prototyping.
5. pwa - PWA template for vue-cli based on the webpack template
6. simple - The simplest possible Vue setup in a single HTML file

流程：

? Project name // 项目名
? Project description // 项目描述
? Author // 开发者
? Vue build standalone
? Install vue-router? // 是否安装Vue路由,单页面应用建议开启
? Use ESLint to lint your code? // 是否启用eslint检测规则，建议开启
? Pick an ESLint preset Standard // 选择eslint检测规则的版本
? Setup unit tests with Karma + Mocha? No // 测试项目
? Setup e2e tests with Nightwatch? No // 测试项目

进入项目文件夹

cd 文件夹名

安装依赖

安装sass依赖

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

或

npm i node-sass sass-loader -D

安装axios依赖（与后台数据交换）

npm install axios --save

或

npm i axios -S

更换webpack-dev-server版本

webpack-dev-server高于2.7.1的版本使用了es6，为了兼容低版本的浏览器，使用2.7.1版本的webpack-dev-server

npm rm webpack-dev-server --save-dev
npm install [email protected] --save-dev

或

npm rm webpack-dev-server -D
npm i [email protected] -D

安装默认依赖

npm install

或

npm i

自定义eslint检测规则

在.eslintrc.js文件里添加

// 没有分号不警报
'semi': ['error', 'never'],
// 忽略函数的参数前必须有空格的警告
'space-before-function-paren': ['error', 'never'],
// 忽略缩进警报
'indent': 0,
// 尽可能地使用单引号,允许字符串使用单引号或双引号，只要字符串中包含了一个其它引号
'quotes': ['error', 'single', { 'avoidEscape': true }]

以上代码根据个人代码习惯进行设置。

设置视口

以下代码适合移动版

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

添加报错代码

<script>
    window.onerror = function (message) {
        alert(message)
    }
</script>

以上代码最好在编译前删除，防止正式版有弹窗报警。

vscode调试配置

需安装vscode插件：Debugger for Chrome

在配置文件launch.json中添加

"configurations": [
    {
      "name": "启动Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8080",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}",
      "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
      "name": "监听Chrome",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "url": "http://localhost:8080",
      "webRoot": "${workspaceRoot}"
    }
]

项目目录设置

1. 在src文件夹下添加common文件夹放公共的模块和资源
2. 在common文件夹下添加fonts(字体)文件夹、js(javascript)文件夹、scss(scss样式)文件夹
3. 在主目录下的static文件夹下添加css文件夹，里面放reset.css
4. 在.gitignore文件里添加要忽略的文件和文件夹

导入

导入css重制设置

在main.js添加

// 导入css重制设置
import '../static/css/reset.css'

导入axios组件

在main.js添加

// 导入axios组件
import axios from 'axios'
// 全局注册axios，不是vue插件
Vue.prototype.axios = axios
// 接口根地址
axios.defaults.baseURL = 'http://www.sample.com/'

编辑路由

设置基于vue-router的单页应用的标题

// 导入模块和组件
import Vue from 'vue'
import Router from 'vue-router'
import login from '@/components/login/login'
import index from '@/components/index/index'
// 注册vue-router
Vue.use(Router)
// 单页应用页面的设置
const router = new Router({
  routes: [
    // 登录
    {
      path: '/login',
      component: login,
      meta: {
        title: '登录'
      }
    },
    // 首页
    {
      path: '/index',
      component: index,
      meta: {
        title: '首页'
      }
    }
  ]
})
// 对单页应用的每个页面的title进行设置
router.afterEach(route => {
  // 从路由的元信息中获取title属性
  if (route.meta.title) {
    document.title = route.meta.title
    
    // 如果是iOS8以下的设备（使用UIWebView），则使用如下hack的写法实现页面标题的更新
    if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
      const hackIframe = document.createElement('iframe')
      hackIframe.style.display = 'none'
      hackIframe.src = '/robots.txt?r=' + Math.random()

      document.body.appendChild(hackIframe)

      setTimeout(_ => {
        document.body.removeChild(hackIframe)
      }, 300)
    }
  }
})
// 导出
export default router

开始编程

启动项目

npm run dev

打开调试

打开vscode调试面板，点击启动Chrome。