Vue-独立日-单文件组件

Vue-独立日-单文件组件

1. 单文件组件

https://cn.vuejs.org/v2/guide/single-file-components.html

a.
<template>
html代码
</template>
<script>
js代码
</script>
<style>
css代码
</style>

b.
<template>
html代码
</template>
<script src="相对路径的外部的js"></script>
<style src="相对路径的外部的css"></style>

2. vue-cli 4.5的使用

​ npm install -g @vue/cli（一次安装）

​ vue create myapp

- npm run serve 开发环境构建
- npm run build 生产环境构建
- npm run lint 代码检测工具

style标签 加上scoped属性，css局部生效
style标签 加上lang="scss"，支持scss

3. Vue.config.js

（1）proxy代理

https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

devServer: {
port:8000, //随便改端口号
proxy: {
'/api': {
target: 'https://*.*.com',
host: '*.*.com',
changeOrigin:true
}
}
}

（2）alias别名配置

​ @ is an alias to /src

// vue.config.js
module.exports = {
	configureWebpack: {
		resolve: {
			alias: {
				'assets': '@/assets',
				'components': '@/components',
				'views': '@/views',
			}
		}
	},
}

（3）vue.config.js中配置publicPath:’./’

（4）vscode自动修复eslint

​ 安装eslint插件，并启用

​ [文件] => [首选项] => [设置] => 用户,找到 setting.json，加上以下配置

"editor.codeActionsOnSave": {
"source.fixAll": true
}

（5）关闭eslint

​ vue.config.js lintOnSave:false

​ .eslintrc 删除 ‘@vue/standard’ （对于某个规则关闭， no-new:“off”）

​ 或者，你也可以通过设置让浏览器overlay同时显示警告和错误：

//vue.config.js
module.exports = {
	devServer:{
		overlay:{
			warnings:true,
			errors:true
		}
	}
}

4. 利用vue cli进行组件化开发

​ 迁移todolist、swiper案例到vue cli中