详细见 vue-cli
1.详细指南
2.配置参考
3.插件开发
4.开发部署
Vue-cli：没有比官网更全的了 必读！！！
1、vue create
vue create hello-world
2、CSS 奇异技术：
1、穿透
CSS穿透，修改其他（非自己写的）框架、其他组件样式
Css: 深度作用选择器:使用 >>> 操作符可以使 scoped 样式中的一个选择器能够作用得“更深”，例如影响 子组件
<style scoped>
#app >>> a {
color: red
}
</style>
Sass 之类的预处理器无法正确解析 >>> 。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符 取而代之
<style scoped lang="scss">
#app {
/deep/ a {
color: rgb(196, 50, 140)
}
::v-deep a {
color: rgb(196, 50, 140)
}
}
</style>
3、CSS-模块化
关键代码如下，详细使用翻看文档
3个全部要看哦~
import styles from './foo.module.css'
// 所有支持的预处理器都一样工作
import sassStyles from './foo.module.scss'
首先，CSS Modules 必须通过向 css-loader 传入 modules: true 来开启：
// webpack.config.js
{
module: {
rules: [
// ... 其它规则省略
{
test: /.css$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
// 开启 CSS Modules
modules: true,
// 自定义生成的类名
localIdentName: '[local]_[hash:base64:8]'
}
}
]
}
]
}
}
/* style.css */
.className {
color: green;
}
import styles from "./style.css";
// import { className } from "./style.css";
element.innerHTML = '<div class="' + styles.className + '">';
4、模拟数据
devServer
-
- 有些值像
host、port和https可能会被命令行参数覆写。 - 有些值像
publicPath和historyApiFallback不应该被修改，因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。
- 有些值像
使用开发服务器配置before选项，可以编写接口，提供模拟数据。
// vue.config.js
module.exports = {
devServer:{
// 设置dev代理可避免用接口时的跨域问题。
proxy: 'http://localhost:3000',
// 接口定义。
before(app) {
app.get('/api/courses', (req, res) => {
res.json([
{ name: 'web全栈', price: 8999 },
{ name: 'web高级', price: 8999 }
])
})
}
}
}
// 使用
import axios from 'axios'
export function getCourses() {
return axios.get('/api/courses').then(res => res.data)
}
proxy:代码配置
在 vue-config.js中可以配置
在 package.json 中 也可以配置
5、实际测试服务器-node层
记得配合自带的8080服务的 proxy选项为 localhost:3000
// 需要安装express:npm i express
const express = require('express')
const app = express()
app.get('/api/courses', (req, res) => {
res.json([{ name: 'web全栈', price: 8999 }, { name: 'web高级', price: 8999 }])
})
app.listen(3000)
