知识点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;