You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
module.exports={root: true,parser: 'babel-eslint',parserOptions: {sourceType: 'module'},// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-styleextends: 'standard',// required to lint *.vue filesplugins: ['html'],// add your custom rules here 修改规则 配置为0的话就是不用这个规则'rules': {// allow paren-less arrow functions'arrow-parens': 0,// allow async-await'generator-star-spacing': 0,// allow debugger during development'no-debugger': process.env.NODE_ENV==='production' ? 2 : 0//开发环境允许debugger,正式环境不可以}}
.gitignore 提交的时候忽略的目录
index.html 入口文件
代码编译过程
路口文件index.html
<!DOCTYPE html><html><head><metacharset="utf-8"><title>sell</title></head><body><app></app><!-- built files will be auto injected --></body></html><!-- js和css动态的插入到页面 -->
<template><divid="app"><imgclass="logo" src="./assets/logo.png"><hello></hello><!--下面的script components定义了自定义的标签--><p>
Welcome to your Vue.js app!
</p><p>
To get a better understanding of how this boilerplate works, check out
<ahref="http://vuejs-templates.github.io/webpack" target="_blank">its documentation</a>.
It is also recommended to go through the docs for
<ahref="http://webpack.github.io/" target="_blank">Webpack</a> and
<ahref="http://vuejs.github.io/vue-loader/" target="_blank">vue-loader</a>.
If you have any issues with the setup, please file an issue at this boilerplate's
<ahref="https://github.com/vuejs-templates/webpack" target="_blank">repository</a>.
</p><p>
You may also want to checkout
<ahref="https://github.com/vuejs/vue-router/" target="_blank">vue-router</a> for routing and
<ahref="https://github.com/vuejs/vuex/" target="_blank">vuex</a> for state management.
</p></div></template><script>importHellofrom'./components/Hello'exportdefault{components: {
Hello <!--定义<hello></hello>标签 -->
}}</script><style>
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#app {
color: #2c3e50;
margin-top: -100px;
max-width: 600px;
font-family: Source Sans Pro, Helvetica, sans-serif;
text-align: center;
}
#app a {
color: #42b983;
text-decoration: none;
}
.logo {
width: 100px;
height: 100px
}
</style>
// hello.vue
<template><divclass="hello"><h1>{{ msg }}</h1></div></template><script>// 导出模块 vue会处理导出相应的样式,模版,数据 exportdefault{data(){return{msg: 'Hello Vue!'}}}</script><!-- Add "scoped" attribute to limit CSS to this component only --><stylescoped>
h1 {
color: red;
}
</style>
The text was updated successfully, but these errors were encountered:
1. vue.js介绍
Vue-cli是vue的脚手架工具
vue-cli的文件夹和文件分析
build/config 文件夹 webpack配置相关
node_modules npm包安装依赖
src 存放的项目源码
static 第三方静态资源 .gitkeep 当文件夹为空的时候也提交到github仓库
.babelrc babel转换
.editorconfig 编辑器设置
.eslintignore 忽略eslint检查文件
.eslintrc.js eslint配置
.gitignore 提交的时候忽略的目录
index.html 入口文件
代码编译过程
路口文件index.html
main.js 入口js文件 src下面的main.js
App.vue模块
每一个组建分三个部分 1. template 2. script 3. style
The text was updated successfully, but these errors were encountered: