脚本宝典收集整理的这篇文章主要介绍了菜鸟新手入门:vscode下vue脚手架开发入门流程,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
vue init <template-name> <project-name>
可用模板:
流程:
? 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 文件夹名
npm install node-sass --save-dev
npm install sass-loader --save-dev
或
npm i node-sass sass-loader -D
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 webpack-dev-server@2.7.1 --save-dev
或
npm rm webpack-dev-server -D
npm i webpack-dev-server@2.7.1 -D
npm install
或
npm i
在.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插件: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
文件里添加要忽略的文件和文件夹在main.js
添加
// 导入css重制设置
import '../static/css/reset.css'
在main.js
添加
// 导入axios组件
import axios from 'axios'
// 全局注册axios,不是vue插件
Vue.prototype.axios = axios
// 接口根地址
axios.defaults.baseURL = 'http://www.sample.com/'
// 导入模块和组件
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
。
以上是脚本宝典为你收集整理的菜鸟新手入门:vscode下vue脚手架开发入门流程全部内容,希望文章能够帮你解决菜鸟新手入门:vscode下vue脚手架开发入门流程所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。