脚手架设置
脚手架安装
vue init 可用模板：
- webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
- webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
- browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
- browserify-simple - A simple Browserify + vueify setup for quick prototyping.
- pwa - PWA template for vue-cli based on the webpack template
- 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 }]以上代码根据个人代码习惯进行设置。
设置视口
以下代码适合移动版
添加报错代码
以上代码最好在编译前删除，防止正式版有弹窗报警。
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}"
}
]项目目录设置
- 在
src文件夹下添加common文件夹放公共的模块和资源 - 在
common文件夹下添加fonts(字体)文件夹、js(javascript)文件夹、scss(scss样式)文件夹 - 在主目录下的
static文件夹下添加css文件夹，里面放reset.css - 在
.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。
