10-05-vue-cli 脚手架

最新推荐文章于 2024-04-14 15:51:08 发布

ange997

最新推荐文章于 2024-04-14 15:51:08 发布

阅读量85

点赞数

分类专栏： 10-Vue 文章标签： vue

本文链接：https://blog.csdn.net/ange997/article/details/108419272

版权

10-Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Vue-cli 步骤

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页（spa）应用。
可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
全局安装：
在这里插入图片描述
使用vue可以查看是否安装成功。
创建项目：

vue create myapp

配置内容

键盘上下键切换， 空格键表示选中
Manually select features
Babel
Less
In pageage.json

进入运行项目：

cd myapp
npm run serve

目录说明

在这里插入图片描述

单文件组件

把一个组件所需要的代码全写在一个单独的文件中。换句话，一个文件就是一个组件，vue给这个文件取了一个特殊的后缀名:　.vue。
在这里插入图片描述

将<template></template>	组件模板（视图）
	<script></script>	组件对象
	<style></style>	组件样式
	放在一个单独的文件中

项目工作流程

入口：main.js
在这里插入图片描述
App.vue

在上面的template中，可以看到不管载入哪个组件，这个图片是一直存在的。
路由：router/index.js
路由对象在vue的实例中被注入

Home.vue组件

单文件组件的三个部分的使用细节

template

在这里插入图片描述
就是相当于是

{
template :”#app”
}

已经直接被写好了，就是template标签中的内容。它可以是：

html标签
各种vue指令
或者是数据项

Script

可以写任何的js代码
在export default {} 中，就相当于是你定义的组件对象，我们之前定义的组件的

data
computed
filters
methods
components

Style

设置当前组件的样式。
注意两点：
Scoped (scope 作用域)
如果在style上添加scoped，则会在生成样式同时，加上一些独一无二的标记符，它们的作用就是让这个样式只会作用于当前的组件.
在这里插入图片描述
Lang
如果你想用其它的css的预编译语言去写样式：
如less,sass…也可以。
你只需要把lang设置一下：

打包项目

.vue文件浏览器不认识，浏览器只知道 html，css，js 所以就需要打包
在这里插入图片描述
命令：

build也是在 package.json中已经设置好的scripts：
最后使用 git 上传

脚手架强化

Vue是渐进式框架：vue.js vue-router vuecli vuex UI库 axios
官方提供的文档很重要
脚手架的版本：

之前全局安装脚手架是：npm i vue-cli -g
现在全局安装脚手架是：npm i @vue/cli -g

不同版本的脚手架创建项目的方式不一样：

老版本的脚手架：vue init webpack myapp
新版本有脚手架：vue create myapp

通过UI创建项目

在这里插入图片描述

sass的配置

注意：要创建项目时，如果你选择了sass预处理器，那么你是不需要安装上面的依赖，直接使用sass就OK了。
类似于less，是一门css预处理器。
默认情况下，浏览器是不认识sass的，我们把sass代码转化成css代码，此是需要借助一个第三方模块，叫sass-loader, sass-loader又需要借助node-sass模块。
安装如下：

npm install node-sass --save-dev 开发依赖
npm install sass-loader --save-dev 开发依赖

上面创建了一个项目，叫elm，选择时，使用的less，默认情况，它把less需要的配置都配置OK，现在我们需要sass编写CSS
在这里插入图片描述
效果如下：

修改代码如下：

保存代码，进行打包，看效果如下：

安装sass所需要的依赖如下：

npm install node-sass --save-dev 开发依赖
npm install sass-loader --save-dev 开发依赖

node-sass比较容易安装失败，如果失败了，不要再npm i node-sass了，先把所有包都删除了，通过npm i 重新安装。
第三方依赖，要么去npm上面搜索，要么去github上面搜索，都是权威的。
安装完毕，运行项目，效果如下：

rem适配（等比缩放）

有多种不同第三方模块，我们使用postcss-pxtorem和amfe-flexible
安装依赖如下

npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save-dev

安装好了，可以在vue-config.js配置，在vue-config.js中配置

在main.js中引入lib-flexible

如果写移动端项目，视口一定要加，默认是加过的，不能删除，如下：