vue脚手架（vue-cli）搭建

打开要建项目的目录，打开终端，安装：

npm install -g @vue/cli

## 安装成功后，检查
vue --version
vue -V
# Vue和VueCLI是两回事

vue create 项目名称

预设选项：
在这里插入图片描述

选择预设功能（根据自身项目需要选择）按空格选择

Babel=>转换工具，将ES6转换成ES5的转换工具，有些浏览器不支持ES6语法
router=>路由管理器；
VueX=>一个仓库，存储状态信息
CSS pre-processor =>css预处理器，提高写css的效率，经常用到的是LESS,SASS
Eslint=>校验代码工具（审查代码是否符合代码规范以及统一的代码风格，审查代码是否存在语法错误）；

ESlint用于规范项目的编码，强制开发人员注意代码规范。关于ESlint的报错，有一份错误参照，可以访问以下地址查看：https://cn.eslint.org/docs/rules/。
学习阶段不建议使用ESlint，所以会创建一个不带有 eslint 的项目来学习。

progressive web app support先进的web App支持
Unit Testing：单元测试
E2E Testing：端到端测试

选择版本2

在这里插入图片描述

是不是用history模式来创建路由？选择y不带#，选择n带# （url中的哈希值）
hash模式和history模式的不同：hash 带了一个 # 而history没有#；
hash和history都属于浏览器自身的特性；
推荐文章：https://blog.csdn.net/cplvfx/article/details/107294535
在这里插入图片描述

In dedicated config files：单独保存在各自的配置文件中
In package.json：保存在package.json文件中

是否要记录这套配置方便下次使用？

访问localhost:8080

主要文件：
main.js：项目/程序入口文件（该文件中JavaScript代码都会被执行）
App.vue：根组件（万物之根）
components：自定义的功能组件
assets：静态资源目录（图片、视频、音频等就是静态资源）
views：存放视图组件的

一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)，模板template只能包含一个父节点（顶层div只能有一个，没有兄弟节点）.
样式通过style标签<style></style>中的样式默认影响全局，如需定义作用域只在该组件下起作用，<style scoped></style>；引入外部css文件，需给项目安装css-loader依赖包，打开cmd，进入项目目录，

		npm install css-loader

安装完成后，就可以在style标签下import所需的css文件，例如：

<style>
    import './assets/css/index.css'
</style>

根组件App.vue中：<router-view/>将其理解为一个插槽，跳转路由时，该路由下的页面就在这个插槽中渲染显示，写在上面后者下面的内容都在渲染的组件上方和下方显示。
在这里插入图片描述
修改更直观展示:

图1：

图二：注意地址

原因：理解为APP.vue在index.html里的id为#app的里面，最终形成一个符合w3c标准的页面

router目录下的index.js：
在这里插入图片描述

import Home from '../views/Home.vue'

  {
    
    
    path: '/',
    name: 'Home',
    component: Home
  },
//会直接加载
//在文件main.js引入router的时候，index.js中的import就执行了   进入网站一般都会触发 '/',所以写成直接加载

  {
    
    
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    //路由懒加载
    //类似于按需导入，触发/about的时候，才去import
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }

在这里插入图片描述

vue脚手架（vue-cli）搭建

选择版本2

猜你喜欢