单页面应用
-
分为3层
-
结构层(template)
-
样式层(style)
-
行为层(script)
-
-
入口文件
main.js:程序最开始执行的文件 -
babel:就是
翻译官,比如ES6语法转换成ES5语法
脚手架使用
- 命令行创建项目: vue create 项目名称
- node_modules:放置项目依赖的地方
- public:一般放置一些共用的静态资源，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面
- src：开发者源代码文件夹
- assets文件夹：经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面）
- components文件夹:一般放置非路由组件（或者项目共用的组件）
- App.vue 唯一的根组件
- main.js 入口文件【程序最先执行的文件】
- babel.config.js:babel配置文件(翻译官)
- package.json：看到项目描述、项目依赖、项目运行指令(项目身份证)
- README.md:项目说明文件
- 常用的
项目配置项
- 浏览器自动打开:
- 在package.json文件配置
"scripts": {
"serve": "vue-cli-service serve --open", // 添加 --open参数
"build": "vue-cli-service build",
"lint": "vue-cli-service lint" // 新增
},
- 在 vue.config.js文件添加配置(如果不添加host地址,默认跳转到0.0.0.0:8080)
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: { // 新增配置
open: true,
host: 'localhost',
port: 8080
}
})
- 关闭eslint校验工具
// vue.config.js
module.exports = {
lintOnSave:false,
}
3.3 src文件夹的别名的设置
因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些
创建jsconfig.json文件
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"dist"
]
}