01-使用脚手架搭建项目

知识点1-使用脚手架

1.脚手架的基本知识点

1.脚手架本质

---脚手架本质就是一个插件vue-cli；

2.脚手架作用

----可以帮助我们快速创建一个项目的目录结构；

使用脚手架来搭建项目结构

1.步骤

[1]在想要创建项目的地方shift+右击之后点击在此处打开Powershell窗口

前提：全局安装脚手架；

//也可打开cmd小黑窗，cd+文件夹路径，切换到需要的路径在输入命令

[2]输入命令vue create 项目名，([1]选择默认创建；[2]手动选择创建)；

• 默认流程

  • [1] 选择默认--Default ([Vue 2] babel, eslint)

  • [2]直接就下载完成了

• 手动选择流程

  • [1]选择手动--- Manually select features

  • [2]选择你在项目中使用的插件：--- Check the features needed for your project:

    • (*) Choose Vue version

    • (*) Babel( )

    • TypeScript( )

    • Progressive Web App (PWA) Support

    • ( ) Router

    • ( ) Vuex

    • ( ) CSS Pre-processors

    • (*) Linter / Formatter

    • ( ) Unit Testing

    • ( ) E2E Testing

    • 注：*代表选中，若是想切换有没有选中---使用 空格 切换

  • 创建项目时选择的特性有：

    babel： 将高版本js转换成低版本js

    Router: 在项目中使用 vue-router

    Vuex：在项目中使用 Vuex

    CSS Pre-processors：使用 css 预处理器

    Linter：代码规范

  • [3] Use history mode for router? ---是否选择history的路由

    注：路由方式分为两种，一种是history路由另一种是hash路由；

    ------区别：history路由没有#;hash路由存在#；

    ------(目前)使用hash路由----history路由需要后台进行一定的配置；

  • [4]Sass/SCSS (with dart-sass)Sass/SCSS (with node-sass)LessStylus ---选择css预处理器

    ----目前使用的是less

    注：

    • sass(可以不写{}不是很友好)；

    • scss是sass的升级；

    • stylus与scss相似；现在一般使用less或scss;

  • [5]ESLint with error prevention onlyESLint + Airbnb configESLint + Standard configESLint + Prettier

  ----选择eslint的版本；

  ---注：eslint没有标准发布的版本，(Standard 版本比较火，所以我们也使用Standard)

  • Pick additional lint features---选择什么时候进行eslint检查

    ---注：一般都是选择保存的时候进行eslint的检查

  • Where do you prefer placing config for Babel, ESLint, etc.?---将以上选择的插件的文件信息放在哪里

    In dedicated config files In package.json ---一般选择package.json(若是选择单独创建文件夹--需要很多文件夹，不是很友好)

  • Save this as a preset for future projects? ---是否生成快捷方式

    ----若是选择是的话，需要起一个名字，以后可以快速创建与该配置相同的脚手架

  • 等待下载完成；

前提：(电脑安装了脚手架插件在电脑(cmd)npm install -g @vue/cli,可以通过vue --version检车是否安装以及版本)

注意点：

• 项目名称不能使用中文，英文大写；

• 安装项目的时候，尽量放在非中文目录下；

• 一般最好先将文件建在桌面上(写完成之后再移动)；

• 若是网络不好，卡住了--按一次的 ctrl+c,表示我要下载【加速】；

• 两次ctrl+c表示终止运行；

[3]运行

• (1)生成一个目录文件

  • 将文件夹放在vscode中，在跟文件上右击集成终端，

  • -----npm run serve 查看是否运行成功

• （2）

  • cd 文件夹名---切换到文件对应路经

  • npm run serve​​

2.脚手架的目录结构

1.node_modules：第三方包管理；

注：存放在node_modules中的包，导入时不需要写路径，直接写包名即可(原因：只要是存在在这个包中，vue能够自动识别)；

2.pubic:存放网站图标和首页html；

3.src:项目代码写在这里

[1]api:抽离请求

1)在src文件下创建一个api文件夹，里面创建一个request.js文件用来存放axios的配置信息；

​ [1]assets：存放静态资源(图片，css等)；

​ [2]compontents:存放公共组件(多个页面都需要使用的组件)；

[3]router:存放路由配置文件

1)在src文件夹中--创建router文件夹，里面创建一个index.js文件，存放路由的配置信息；

[4]store:存放vuex配置文件

[5]views:存放组件

1)在src文件夹下--创建views文件夹，在里面定义页面组件(一般不同的组件再建立不同的文件夹)；

[6]style:存放字体图标，初始化样式，公共样式等

[7]utils:存放工具型方法

​ [8]App.vue---主组件(一个项目只有一个主组件---最大的父组件)

​ [9]main.js---入口文件

[10].editorconfig:告诉我们一些语法小规范

[11]gitignore：忽略git文件夹；(也就是说在里面写的文件夹，项目在上传到仓库时，不上传该文件；eg:node_modules)；

[12]package.json:存放下载包的版本信息

• dependencies属性中存放的是:上线还要使用的包

• devDependencies属性存放的是:开发中使用的包

[13]package-lock.json:存放导入包的下载路经；

1)在删除了node_modules时，仅需在项目根目录右击终端打开，输入明令npm i即可恢复；

2)在更新时不需要在npm库中去寻找，直接在这个地址进行更新，提高更新效率；

[14]babel.config.js---(将js高级转化为js低级--目的处理浏览器兼容性):

注：webpack打包的时候，是从main.js入口文件开始打包的；如果没有导入到入口文件中，脚手架并不知道该文件地存在(导入到其他已经导入到main.js的文件也可以--局部导入)；-------------所以任何文件都需要和main.js建立依赖关系；

2.快速原型开发

1.应用场景：想证实一下自己的想法，又不想生成一个项目结构时就使用快速原型开发；

2.定义：可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发；

3.前提：必须先安装一个全局的扩展：

npm install -g @vue/cli-service-global

注意：vue serve 的缺点就是它需要安装全局依赖，这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发

4.快速原型开发的执行原理

默认情况下，浏览器只能识别html,css,js后缀文件，无法识别 .vue后缀文件，所以要想让浏览器识别.vue后缀文件，我们需要借助一些插件来帮我们将.vue文件转成浏览器可以识别的html文件

vue serve 使用了和 vue create 创建的项目相同的默认设置 (webpack、Babel、PostCSS 和 ESLint)。它会在当前目录自动推导入口文件——入口可以是 main.js、index.js、App.vue 或 app.vue 中的一个。你也可以显式地指定入口文件：vue serve 入口文件.vue

5.快速原型开发步骤

1.在存在此.vue文件的根目录右击-在集成终端打开-若是在开发阶段使用vue serve 组件名，若是在运行阶段使用vue build 组件名；

2.可以加--open,--open的意思是在运行完毕之后打开网页;

eg：vue serve 组件名 --open;