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

01-使用脚手架搭建项目相关推荐

vue脚手架搭建项目_复习之vue脚手架搭建项目的两种方法
安装脚手架 node 版本要求: > 8.9 . 关于旧版本:如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x),那么需要先卸载掉. 卸载旧版本运行:``npm uninst ...
vue脚手架搭建项目的兼容性配置
使用vue-cli搭建项目,面临着解决ie兼容性问题(ie9+),因为ie浏览器并不支持es6语法等. 首先安装babel-polyfill,解决ie不支持promise对象的问题 npm insta ...
React脚手架搭建项目
React提供了一个用于创建react项目的脚手架库:create-react-app 一.项目的搭建第一步: 全局安装 npm i -g create-react-app 第二步: 切换到准备创建 ...
vue-cli5脚手架搭建项目过程详解 -vue组件单元测试
简介单元测试是对软件中的最小可测试单元进行测试.(最小可测试单元是要有结果产出的.例如某个方法,单独的某个操作) 单元测试其实是伴随着敏捷开发,它是对更快开发的一种追求.早发现错误比晚发现错误会更好 ...
脚手架搭建项目（详解)
一.什么是脚手架? 在vue中 ,脚手架使用的是 ,vue-cli这个技术脚手架,就是一个今后所写项目的一个基本的空框架 ,这个空框架中包含了与项目业务无关的空框框二.安装步骤 1.电脑上必须有 ...
Vue脚手架搭建项目
全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...
react脚手架搭建项目目录介绍
readme.md --项目介绍自定义一些项目信息以及简单使用 package.json --dependencies下管理生产环境所用的包及版本 ---devDependencies里得插件只用于 ...
vue3 @/cli脚手架搭建项目
创建一个工作目录: 按住shift键,右键此工作目录打开powershell窗口 (s) 输入:start cmd就进入到cmd下面输入命令:vue create 项目名称然后按回车! 进入预设, ...
vue脚手架项目如何加入html文件,使用vue脚手架怎么搭建项目
使用vue脚手架搭建项目的方法:1.全局安装vue-cli脚手架:2.打开命令提示符,通过cd命令进入项目所在文件夹:3.创建vue-cli工程项目:4.安装依赖:5.启动项目. 本教程操作环境:wi ...

01-使用脚手架搭建项目

知识点1-使用脚手架

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

2.脚手架的目录结构

2.快速原型开发

01-使用脚手架搭建项目相关推荐

最新文章

热门文章