vue-cli 脚手架详细介绍

4 vue-cli 脚手架

1 脚手架介绍

vue-cli也叫vue脚手架,vue-cli是vue官方提供的一个全局命令工具，这个命令可以帮助我们快速的创建一个vue项目的基础架子。

脚手架：搭建好的一个架子，我们在架子上进行开发

开箱即用
零配置
基于webpack、webpack-dev-server

https://cli.vuejs.org/zh/guide/

2 快速入门

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

【1】切换到当前项目目录：

在这里插入图片描述

使用cd 命令切换

【2】在项目目录下执行下面的命令

cnpm install vue-cli -g    # 只需安装一次， 可以使用cnpm安装,通过# Windows使用 `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
# work5是模块名字
vue init webpack work5#Mac 使用
sudo vue init webpack vuedemo##查看vue版本
vue --version

效果：

在这里插入图片描述

如果安装vue脚手架之后, vue init命令无法识别, 可以尝试在vscode在任务管理器中关闭进程,再启动

在这里插入图片描述

说明：use ESLint to lint …表示代码检测，不需要，所以设置为no

注意：时间会长一点，有可能几分钟。

下载成功后如下显示：

在这里插入图片描述

注意：在vue脚手架中文件后缀名是.vue称为组件。App.vue称为根组件。

在这里插入图片描述

npm run dev

在这里插入图片描述

浏览器访问 http://localhost:8080/#/

或者在vscode终端中按住ctrl键，点击鼠标左键即可访问，如下：

在这里插入图片描述

退出服务器, 两下ctrl+c

3 基础介绍

3.1 服务器设置

【1】问题：为什么执行上述命令npm run dev，就可以使用浏览器访问网址?

1.使用npm命令的时候我们首先需要找到vue脚手架中的package.json文件

在这里插入图片描述

在该文件中具有webpack-dev-server，它表示开发服务器命令，该命令要读取build目录下的配置文件webpack.dev.conf.js

在这里插入图片描述

【2】webpack.dev.conf.js文件说明：

1.

2.webpack.base.conf配置文件：

conf/index.js

注意：对于该文件我们必须掌握如何修改开发服务器的几个配置即可，上述的内容了解即可

在这里插入图片描述

proxyTable: { //代理配置(能够发送跨域请求)"/": {target: "http://localhost:8080",changeOrigin: true}},// Various Dev Server settingshost: 'localhost', // can be overwritten by process.env.HOSTport: 8090, //修改成8090避免跟tomcat8080冲突autoOpenBrowser: true, // npm run dev 自动打开浏览器

【3】修改index.js文件的参数

在这里插入图片描述

【4】在终端执行如下命令：

在这里插入图片描述

此时就会自动打开浏览器：

在这里插入图片描述

小结：

在这里插入图片描述

说明：最后我们只需要关注config目录下的index.js文件，修改内容如下：

3.2 目录分析

在这里插入图片描述

1. index.html是页面, 不用动,提供一个最基础的页面
2. src/main.js是入口程序, 不用动, 渲染了App.vue组件
3. src/App.vue是根组件, 默认有很多的内容，可以编辑

【1】index.html页面说明

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>work5</title>
</head>
<body>
hello vue
<div id="app"></div>
hello vue1
<!-- built files will be auto injected -->
</body>
</html>

页面效果：

在这里插入图片描述

说明：接下来我们要学习如何在index.html页面上使用标签

显示如上页面的内容。

【2】main.js

1.src/main.js是入口程序, 不用动, 渲染了App.vue组件

2.main.js文件代码

javascript">// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
//vue脚手架需要导入vue
import Vue from 'vue'
//导入src下面的App.vue文件
import App from './App'
//这里是路由，我们下面讲解，这里先不需要知道
import router from './router'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({
el: '#app',
//路由
router,
//组件
components: { App },
template: '<App/>'
})

在这里插入图片描述

【3】App.vue

1.src/App.vue是根组件, 默认有很多的内容，可以编辑

2.代码

<!--1.template相当于body标签
-->
<template>
<div id="app"><img src="./assets/logo.png"><router-view/>
</div>
</template>
<!--书写js代码-->
<script>
export default {
name: 'App'
}
</script>
<!--书写css代码-->
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

在这里插入图片描述

vue单文件组件的说明

一个.vue文件就是一个组件,后续开发vue，所有的功能都是基于组件实现。

安装插件(.vue文件才会有提示)

注意：vscode默认不支持vue,.vue文件是vue脚手架特有的，不像.html .css等通用性文件，所以需要安装如下插件

在这里插入图片描述

一个单文件组件由三部分构成

template(必须) 影响组件渲染的结构 html
- 只能有一个根元素
script 逻辑 js
style 样式 css

案例 App.vue

<template>·<!--书写html标签，只有一个根标签--><div id="app"><!-- <img src="./assets/logo.png"><router-view/> -->·<!--插值表达式--><span>{{msg}}</span></div>
</template><script>javascript">
//书写vue代码
export default {data(){return {msg : "hello vue"}}
}/*以后不用这样书写了new Vue({data(){return {msg:"hello vue"}}});*/
</script><style>/*书写css样式*/span{color : red}
</style>

小结：

1.template标签中只能有一个根标签

在这里插入图片描述

2.在App.vue中以后不用再书写

javascript">new Vue({data(){return {msg:"hello vue"}}});

直接导出：

javascript"><script>export default {data(){return {msg:"hello vue"}}}
</script>

在这里插入图片描述

3.3 路由

介绍

前端的路由指的是路径和组件(.vue结尾的文件)的映射关系

【1】

在这里插入图片描述

【2】

在这里插入图片描述

javascript">import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({routes: [{path: '/', // 这里的路径/映射到组件component的HelloWorldname: 'HelloWorld',component: HelloWorld}]
})

1.以上说明路径 / 映射组件HelloWorld

2.组件输出位置用标签

在这里插入图片描述

在根组件App.vue中使用标签引入HelloWorld组件内容。

在这里插入图片描述

一般组件放在 src/views(或pages) 文件夹和 src/components文件夹

练习

目的：页面（组件）、路由配置

需求：模拟网易云音乐

在这里插入图片描述

实现：

1、在src目录下创建 views 文件夹

2、在views文件夹下创建 userList.vue 组件文件

在这里插入图片描述

<template><!--有且只有一个根标签--><div>{{name}}</div>
</template><script>
export default {data(){return {name : "张三"}}
}
</script><style></style>

3、在 router/index.js 下定义页面路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import userList from '@/views/userList' //引入新的组件Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{ // 定义组件的路径path: '/users',//随便定义,组件路径name: 'userlist', //随便定义，组件名component: userList //需要和上面的import userList from '@/views/userList' import后面的userList一致}]
})

说明：至于在根组件App.vue中引入哪个组件由用户在浏览器地址栏上输入哪个组件的路径决定的：

在这里插入图片描述

修改根组件App.vue

<template><div id="app"><img src="./assets/logo.png"> <!-- 注意：这里需要加# --><a href="#/">发现vue</a><a href="#/users">发现好友</a><br><!-- 组件的输出位置 --><router-view/></div></template><script>javascript"></script><style></style>

4、控制台使用 npm run dev 运行

浏览器输入： http://localhost:8090/#/

在这里插入图片描述

# 1.对于index.html和main.js文件我们不需要修改
# 2.main.js文件引入根组件App.vue
# 3.根组件App.vue包含其他组件即components目录或者自己创建的views目录下的组件，组件以 .vue结尾的文件
# 4.修改完组件一定要修改路由
# 5.自己的图片一般存放在static目录下