V u e − C l i 基础使用 Vue-Cli基础使用 Vue−Cli基础使用
视频教程：B站、网易云课堂、腾讯课堂
代码地址：Gitee、Github
存储地址：
百度云-提取码：
Google云
- 1.环境搭建-node的安装
- 2.环境搭建-npm的使用
- 3.vuecli项目讲解
- 4.组件定义和本地样式
- 5.sass语法配置
- 6.sass语法讲解
- 7.rem布局原理和配置
- 8.vant组件库的安装和使用
- 9.Vuex基础
- 10.Element UI组件库使用
- 11.vue-router使用
设置自动保存
环境搭建-node的安装
nvm install 14.18.0
环境搭建-npm的使用
npm init
npm install vue --save
npm install -g @vue/cli
npm install vue@2.6.10 --save
npm install -g @vue/cli@3.11.0
vue --version
vue create test_pro
npm install node-sass@4.12.0 --save-dev
npm install sass-loader@7.0.3 --save-dev
vuecli项目讲解
vue-cli
vue-cli是和vue进行深度组合的工具，可以快速帮我们创建vue项目，并且把一些脚手架相关的代码给我们创建好。真正使用vue开发项目，都是用vue-cli来创建项目的。
安装：
Vue CLI需要Node.js 8.9或更高版本 (推荐8.11.0+)。node环境安装后，直接通过npm install -g @vue/cli即可安装。安装完成后，输入vue --version，如果出现了版本号，说明已经下载完成。
用命令行创建项目：
在指定路径下使用vue create project_name创建项目。
会让你选择要安装哪些包（默认是Babel和ESLint），也可以手动选择。
如果在安装的时候比较慢，可以在安装的时候使用淘宝的链接：vue create -r https://registry.npm.taobao.org project_name。
如果实在不想在创建项目的时候都指定淘宝链接，可以在当前用户目录下，找到.npmrc，然后设置registry=https://registry.npm.taobao.org。
用界面创建项目：
打开cmd，进入到你项目存储的路径下。然后执行vue ui，就会自动打开一个浏览器界面。
按照指引进行选择，然后一顿下一步即可创建。
项目结构介绍：
node_modules：本地安装的包的文件夹。
public：项目出口文件。
src：项目源文件：
assets：资源文件，包括字体，图片等。
components：组件文件。
App.vue：入口组件。
main.js：webpack在打包的时候的入口文件。
babel.config.js：es*转低级js语言的配置文件。
package.json：项目包管理文件。
MyPage.vue
<template>
<div class="mypage">
<h1>Vue</h1>
<p class="info">{{info}}</p>
</div>
</template>
<script>
export default {
name:"MyPage",
data:function(){
return {
info:"tetstetsete"
}
}
}
</script>
<style scoped>
.info{
background-color: red;
}
</style>
App.vue
<template>
<div id="app">
<MyPage></MyPage>
</div>
</template>
<script>
import MyPage from "./components/MyPage"
export default {
name: 'App',
components: {
"MyPage":MyPage,
}
}
</script>
<style>
</style>
组件定义和导入：
定义：组件定义跟之前的方式是一模一样的。只不过现在模板代码专门放到.vue的template标签中，所以不再需要在定义组件的时候传入template参数。另外，因为需要让别的组件使用本组件，因此需要用export default将组件对象进行导出。
导入：因为现在组件是在不同的文件中。所以如果需要引用，那么必须进行导入。用ES6语法的import XXX from XXX。
局部样式：
默认情况下在.vue文件中的样式一旦写了，那么会变成全局的。如果只是想要在当前的组件中起作用，那么可以在style中加上一个scoped属性即可。示例代码如下：
<style scoped>
.info{
background-color: red;
}
</style>
使用sass语法：
很多小伙伴在写样式代码的时候，不喜欢用原生css，比较喜欢用比如sass或者less，这里我们以sass为例，我们可以通过以下两个步骤来实现：
安装loader：webpack在解析scss文件的时候，会去加载sass-loader以及node-loader，因此我们首先需要通过npm来安装一下：
npm install node-sass@4.12.0 --save-dev
npm install sass-loader@7.0.3 --save-dev
指定sass语言：在指定style的时候，添加lang="scss"属性，这样就会将style中的代码识别为scss语法。
组件定义和本地样式
sass语法配置
使用sass语法：
很多小伙伴在写样式代码的时候，不喜欢用原生css，比较喜欢用比如sass或者less，这里我们以sass为例，我们可以通过以下两个步骤来实现：
安装loader：webpack在解析scss文件的时候，会去加载sass-loader以及node-loader，因此我们首先需要通过npm来安装一下：
npm install node-sass@4.12.0 --save-dev
npm install sass-loader@7.0.3 --save-dev
指定sass语言：在指定style的时候，添加lang="scss"属性，这样就会将style中的代码识别为scss语法。
sass语法讲解
Sass介绍：
众所周知，css不是一门编程语言。他没法像js和python那样拥有逻辑处理的能力，甚至导入其他的css文件中的样式都做不到。而Sass就是为了解决css的这些问题。他它允许你使用变量、嵌套规则、 mixins、导入等众多功能，并且完全兼容css语法。Sass文件不能直接被网页所识别，写完Sass后，还需要专门的工具转化为css才能使用。
Sass文件的后缀名：
Sass文件有两种后缀名，一个是scss，一个是sass。不同的后缀名，相应的语法也不一样。这里我们使用scss的后缀名。包括后面讲到的Sass语法，也都是scss的后缀名的语法。
Sass基本语法：
注释：
支持/* comment */和// 注释两种方式。
嵌套：
Sass语法允许嵌套。比如#main下有一个类为.header，那么我们可以写成以下的形式：
#main{
background: #ccc;
.header{
width: 20px;
height: 20px;
}
}
这样写起来更加的直观。一看就知道.header是在#main下的。
引用父选择器（&）：
有时候，在嵌套的子选择器中，需要使用父选择器，那么这时候可以通过&来表示。示例代码如下：
a{
font-weight: bold;
text-decoration: none;
&:hover{
color: #888;
}
}
定义变量：
是的，你没听错。在Sass中可以定义变量。对于一些比较常用的值，我们可以通过变量存储起来，以后想要使用的时候就直接用就可以了。定义变量使用$符号。示例代码如下：
$mainWidth: 980px;
#main{
width: $mainWidth;
}
运算：
在Sass中支持运算。比如现在有一个容器总宽度是900，要在里面平均放三个盒子，那么我们可以通过变量来设置他们的宽度。示例代码如下：
$mainWidth: 900px;
.box{
width: $mainWidth/3;
}
@import语法：
在css中@import只能导入css文件，而且对网站的性能有很大的影响。而Sass中的@import则是完全实现了一套自己的机制。他可以直接将指定文件的代码拷贝到导入的地方。示例代码如下：
@import "init.scss";
@extend语法：
有时候我们一个选择器中，可能会需要另外一个选择器的样式，那么我们就可以通过extend来直接将指定选择器的样式加入进来。示例代码如下：
.error{
background-color: #fdd;
border: 1px solid #f00;
}
.serious-error{
@extend .error;
border-width: 3px;
}
@mixin语法：
有时候一段样式代码。我们可能要用很多地方。那么我们可以把他定义i成mixin。需要用的时候就直接引用就可以了。示例代码如下：
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
如果其他地方想要使用这个mixin的时候，可以通过@include来包含进来。示例代码如下：
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
@mixin也可以使用参数。示例代码如下：
@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
那么以后在include的时候，就需要传递参数了。示例代码如下：
p {
@include sexy-border(blue, 1px);
}
更详细的教程：
更详细的教程可以参考：http://sass.bootcss.com/docs/sass-reference/。
rem布局原理和配置
rem移动端适配：
在移动端（手机端、Pad端），设备尺寸参差不齐。如果想要写完一套代码，能够在所有移动设备上都正常运行，那么采用原生的px单位来设置是不行的。举个例子：iPhone6的尺寸是375px，如果我们想要一个盒子是占据整个宽度的一半，那么会将这个盒子的宽度设置为187.5px，但是并不是所有手机的宽度都是375px，因此就会造成问题。这时候我们可以通过rem来解决这个问题。
什么是rem：
em：当前元素字体大小相对于父标签的字体大小。比如：
<div style="font-size:16px;">
<span style="font-size:2em">你好</span>
</div>
在div中字体大小是16px，而在span标签中因为用的是2em，因此是2倍的父标签字体的大小，也就是32px。
rem：跟em类似，只不过此时的参照元素不是父元素，而是根元素，也就是html元素的大小。比如：
<html style="font-size:14px">
<div style="font-size:16px;">
<span style="font-size:2rem">你好</span>
</div>
</html>
此时的span标签字体大小为html标签字体大小的2倍，也就是28px。
rem适配原理：
rem虽然本身是用来设置字体的大小，但是也可以延伸到设置其他属性的尺寸。利用rem我们可以实现等比缩放。比如设计师给的UI设计图是按照750px尺寸的，我们可以给html的font-size为100px，那么以后我想实现一个32px的大小，转化成rem就是0.32rem。这样写是没有问题的，但是如果用户现在的手机不是750px的，而是375px的，这时候直接写个0.32rem不是会有问题吗？目前这样来说是有问题，但是我们只需要设置html的font-size为windowWidth/750*100，在这个公式中将windowWidth换算成375px，结果为50px，那么用0.32rem后的px为16px，正好是750px尺寸的一半，达到了缩小一倍的效果。
在Vue-cli中实现rem布局：
在使用vue-cli创建的项目中，我们可以通过一些第三方包来方便的实现rem的布局。要安装两个包，分别是：postcss-pxtorem、lib-flexible。安装命令通过npm install --save-dev postcss-pxtorem lib-flexible安装即可。在安装完包后，还需要配置两个地方：
package.json：
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": [
"*"
],
"selectorBlackList": [
"van-*"
]
}
}
}
main.js：
import "lib-flexible"
这样以后在写单位的时候，就不需要换算成rem，直接写px就可以，postcss-pxtorem会自动的将我们写的px转化成rem。而lib-flexible会根据当前的尺寸，来调整html上的font-size进行适配。而其中的37.5则根据设计师设计图的尺寸来，比如设计师是用375px的尺寸来设计的，那么就是375/10。
vant组件库的安装和使用
vant组件库使用
vant库是有赞公司前端团队开源的一款针对vue库的组件库。里面集成了很多移动端用到的组件，包括按钮、图片、Icon图标等。而且因为有赞是一个做微商城的公司，所以有很多微商城的组件比如地址列表、商品卡片、优惠券等组件。
安装：
npm install vant --save
引入组件：
自动按需引入组件 (推荐)
babel-plugin-import是一款babel插件，它会在编译过程中将import的写法自动转换为按需引入的方式
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';
导入所有组件：
Vant支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
更多：
更多请参考：https://youzan.github.io/vant/#/zh-CN/quickstart
9.Vuex基础
Vuex
Vuex是在中大型项目中，用来管理一些变量的。因为如果项目比较大，一些数据在各个页面中可能需要进行交替使用，如果数据量比较大，通过params或者query的方式不太方便。这时候就可以使用Vuex来管理这些数据。
安装：
通过script安装：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>。
通过npm安装：npm install vuex --save。
如果是通过模块化打包的形式使用vuex，则在使用之前需要先通过Vue.use(Vuex)来安装：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
vuex默认依赖Promise，如果你支持的浏览器并没有实现 Promise (比如 IE)，那么你可以使用es6-promise。
你可以通过 CDN 将其引入：
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
或者通过npm install es6-promise --save。
如果是用模块化打包的形式使用，那么还需要导入一下：
import 'es6-promise/auto'
基本使用：
每一个Vuex应用的核心就是store（仓库）。store可以理解为就是一个容器，它包含着你的应用中大部分的状态(state)（就是变量）。Vuex和单纯的全局对象有以下两点不同：
Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
示例代码如下：
<div id="app">
<counter></counter>
</div>
<template id="counter">
<div>
<div></div>
<button @click="updateCount">点击修改</button>
</div>
</template>
<script>
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state){
state.count++
}
}
})
const Counter = Vue.component("counter",{
template: "#counter",
computed: {
count(){
return this.$store.state.count
}
},
methods: {
updateCount: function(){
this.$store.commit("increment")
}
}
})
var vm = new Vue({
el: "#app",
store,
components: {
"counter": Counter
}
})
</script>
mapState：
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性，让你少按几次键：
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// 箭头函数可使代码更简练
count: state => state.count,
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
对象展开运算符：
有时候我们想要将vuex中的变量添加到我们当前已有的computed中。这时候就可以使用对象展开运算符：
computed: {
localComputed () { /* … */ },
// 使用对象展开运算符将此对象混入到外部对象中
…mapState({
// …
})
}
getter：
有时候我们需要从store中的state中派生出一些状态，例如对列表进行过滤并计数：
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}
如果后期很多地方都要使用到这个变量，那么每次在组件中都写一遍肯定是不合适的，这时候就可以使用vuex提供的getter来实现：
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
10.Element UI组件库使用
Element UI组件库使用
element ui组件库是由饿了么前端团队专门针对vue框架开发的组件库，专门用于电脑端网页的。因为里面集成了很多组件，所以使用他可以非常快速的帮我们实现网站的开发。
安装：
课程中用到的版本是2.12.0，为了跟课程环境保持一致，安装的时候指定版本：
npm install element-ui@2.12.0 --save
引入：
引入的时候也是分成两种，一种是全部引入，一种是按需引入。
官网文档：https://element.eleme.cn/#/zh-CN/component/installation
一 全局引入
修改main.js如下
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
或者
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
实例
MyPage.vue
<template>
<div id="MyPage">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="即时配送">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="form.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>
App.vue
<template>
<div id="app">
<MyPage></MyPage>
</div>
</template>
<script>
import MyPage from './components/MyPage.vue'
export default {
name: 'App',
components: {
MyPage
}
}
</script>
<style>
</style>
二 按需引入
安装相关依赖包：
需要借助babel-plugin-component这个库，才能实现按需引入。安装的命令为：npm install babel-plugin-component --save-dev。
配置：
在babel.config.js中添加以下配置：
module.exports = {
"presets": [
"@vue/app"
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
使用：
然后在项目中可以进行使用了。先进行导入，然后进行组件注册，最后再使用：
vue-router使用
步骤1：修改App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
</style>
创建router.js
import VueRouter from 'vue-router'
import Vue from "vue"
import Frame from "./components/Frame"
import Login from "./components/Login"
Vue.use(VueRouter)
const router = new VueRouter({
routes:[
{
path:'/',
component:Frame,
name:"frame"
},
{
path:'/login',
component:Login,
name:"login"
}
]
})
// 导出
export default router;
第三步 修改main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import router from "./routers"
Vue.use(ElementUI);
new Vue({
el: '#app',
router,
render: h => h(App)
});
补充：修改vue.config.js，关闭语法检测，为了取消命名规范
lintOnSave:false 关闭语法检测
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false
})
扫一扫
978
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
