1 基础
1 CLI 用于单页面应用
1 MPA 多页面应用程序 -- 有多个 html 文件
2 SPA 单页面应用程序 -- 一个项目自有一个 html文件
2 关闭ESLint检查
1 vue.config.js -> module.exports = {
lintOnSave: false}
3 知识点:
1 CLI 中, @ 路径表示 src
2 搭建项目
1 安装包:
npm install -g @vue/cli
2 生成项目:
vue create myapp
3 安装过程的配置选择
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
4 进入项目: cd app
5 启动项目: npm run serve
3 项目文件说明
01 node_modules 项目依赖模块 (npm包)的存放位置
02 public 公共资源 -- 服务器目录
index.html 项目主页面
03 src 开发代码
assets 放置一些项目用到的资源 -- 图片, 音频, css重置样式表, js配置文件 ...
components 通常用来放置一些公共的复用的组件
App.vue 项目根组件
main.js 入口文件
04 .editorconfig 编辑器设置, 代码风格
05 .browserslistrc 设置要兼容哪一部分浏览器
06 .eslintrc 帮助我们规范代码; 刚开始使用特别恶心, 报错非常多, 你不按我的来就报错
07 .gitignore GIT 忽略列表
08 babel.config.js 对 babel 的一个配置, 很少改的
09 package-lock.json 会具体到每个版本号
10 package.json 描述了项目依赖的 npm 包
11 README.md 项目说明文档
4 常见 ESlint 常见规范
1. 语句末尾不加分号，如 var abc = 123
2. 函数小括号前后加空格，如 function test () {
}
3. 属性冒号后面加空格，如 {
msg: 'hello'}
4. 文件末尾要添加一个新空行
5. 不能有连续2个以上的空行
6. 单行注释的双斜杆后面加空格，如
7. 等号前后加空格，如 var abc = 123
8. 变量或引入，必须有引用 就是声明变量不用 == 报错
5 简单的理解描述
1 创建单文件组件: HTML结构 + style样式 + export default {
}组件配置项
2 单文件组件 / 根组件 / 路由配置文件 --> 引入 + 注册 + 使用
3 文件详情
1 App.vue -- 整个项目根组件
1 HTML结构 + style样式
2 export default {
} -- 所有的组件会在这个根组件这里组合展示
3 这个文件会在 main.js 中被导入 -- 并挂载到 index.html 中的 <div id="app"> 上
4 根组件渲染组件可以根据路由的方式 -- 当然也可以通过注册的方式 -- 动态组件也是可以的
5 组件切换的功能 -- 可以写死在这里 -- 也可以通过其他组件导入到这里
2 main.js -- 整个项目入口文件
1 加载 vue 和 App.vue 和 router.js + 其他需要的模块
2 Vue.config.productionTip = false -- 打包项目相关
3 创建 Vue实例 -- 把App组件渲染到 id=="app" 的DOM节点上
1 router, -- 路由注册
2 render: h => h(App), -- 相当于导入 App的 <template><div> 内容 </div></template> 到vue实例上
3 el: "#app" -- 挂载到 app节点上
3 index.js -- 路由配置文件
1 加载 vue 和 vue-router + 需要的单文件组件 -- 导出的配置对象
2 使用路由模块 -- Vue.use(VueRouter)
3 创建路由对象 -- const router = new VueRouter({
mode: 'history', routes}) -- routes==映射表对象
4 导出路由对象 -- export default router
5 映射表数组对象
1 同步配置 {
path: '/', name: 'Home', component: 加载的单文件组件}
2 异步配置 {
path: '/', name: 'Home', component: () => import( './xx/xx.vue')}