Vue教程03-Vue脚手架开发环境
Vue脚手架开发环境
- 1.Vue开发环境的安装
-
- 1.1安装Node JS
- 1.2全局安装Vue脚手架
- 1.3安装HBuilderX
- 1.4强烈推荐安装以下工具软件
- 2.HBuilderX创建Vue项目
- 3.用脚手架工具新建Vue项目
- 4.Vue项目的目录结构
- 5.Vue项目的主要文件
- 6.运行Vue项目
- 7. 前端项目开发工程化
1.Vue开发环境的安装
需要的安装文件在钉钉群文件的《工具及安装》文件夹下自行下载
1.1安装Node JS
因为Vue是通过 npm（NodeJS包管理工具）安装的，所以先要安装NodeJS。
官网下载地址 https://nodejs.org/zh-cn/。
选择多数用户使用的长期维护版下载即可。
本课程用的版本是12.16.1，建议同学们选用该版本号。
NodeJs安装后，建议继续进行以下配置及安装
- 配置淘宝镜像
npm是NodeJS自带包管理工具。使用npm 时，如果速度慢的话，建议配置淘宝镜像
npm config set registry http://registry.npm.taobao.org //配置淘宝镜像
- 全局安装cnpm
npm i cnpm@6.1.0 -g //安装cnpm
注意是全局安装 -g 版本要和nodejs、相适应，我的npm版本是6.13.4，nodejs版本是12.16.1。可以通过 node -v npm -v 查看其版本号。
cnpm的使用和npm是一样的，国内使用运行会更快些。
- 全局安装yarn
Yarn是Facebook新推出一个快速安全可信赖的可以替代npm的依赖管理工具。可以通过npm全局安装
npm install yarn -g
yarn的使用和npm是类似的，使用会更快些。
1.2全局安装Vue脚手架
打开命令行终端，执行全局安装命令
npm i -g @vue/cli
安装成功后可以通过以下命令查看Vue脚手架的版本号
vue -V
注意：Vue脚手架的版本 和 Vue的版本完全是两码事。
1.3安装HBuilderX
官网下载地址 https://www.dcloud.io/hbuilderx.html
选择Window | APP开发版下载即可。
1.4强烈推荐安装以下工具软件
-
安装谷歌Chrome浏览器
-
安装vue-devtools
-
安装git工具（推荐Git-2.34.1-64-bit）
-
安装git小乌龟软件（推荐TortoiseGit-2.13.0.1-64bit）
-
安装Web、数据库服务（推荐phpStudy）
-
安装mysql数据库客户端工具（推荐Navicat for MySQL）
-
API接口工具（推荐Apifox-windows-latest）
2.HBuilderX创建Vue项目
通过菜单项"文件->新建->项目"打开新建项目窗口如下
留意屏幕右下角提示项目创建进度，耐心等待片刻后，屏幕右下角弹出如下窗口，表明新项目创建完成了。
3.用脚手架工具新建Vue项目
以下是Vue Cli 4.x创建vue2.x项目的使用步骤
1.在想要生成项目的目录，地址栏里写cmd，打开命令行终端
2.在命令行中输入vue create vue-course-spa
vue-course-spa为项目名，可以自行命名。
3.选择预设项目
运行创建项目命令后，出现如下提示：
可用上下方向键选择预设项，这里我们选择第一个选项vue2-test即可。
选择后按回车开始创建Vue项目，根据网络状况，可能需要一些时间，请耐心等待。
4.创建成功
新项目创建成功后会有以下信息提示：
官网学习
https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
4.Vue项目的目录结构
创建的新项目文件目录结构如下所示
HBuilderX创建的Vue项目，不会自动添加vue-router、vuex模块，在src目录下也没有router、store文件夹，也没有views文件夹，后续可以自行安装添加的。
下面对Vue项目文件的目录结构进行详细说明
1.git文件夹(隐藏)
本地git仓库文件夹，如果git不熟，可以删掉。
2.node_modules文件夹
保存项目运行的依赖包。删除该文件夹后，可以通过命令 npm i 根据项目的配置文件package.json重新安装的。该文件夹内容一般不需要备份留档的。
3.public文件夹
保存着整个单页面应用唯一完整的index.html文件。
- 可在public文件夹下新建css和js文件夹，保存所有页面都需要共用的第三方css和js，比如: bootstrap.css 、jquery.js、bootstrap.js。
- 也可以在public下保存页面中引用的图片资源。
public文件夹下的内容，在项目构建时会原封不动地复制到项目发布后的Web根目录下的，所以页面中对这些资源地引用应该从网站地根路径开始。
4.src文件夹
1)项目构建编译入口main.js文件：存放根组件new Vue({})以及对new Vue()的配置（全局组件）。
2)项目入口根组件App.vue文件：只放根组件< div id=“app”>的HTML内容和根组件的css样式有（全局样式）
项目编译时 main.js中new Vue() 和 App.vue中的< div id=“app”>会重新被编译到唯一完整的index.html页面内。
5.页面组件src/views文件夹
1)所有页面组件都要放在src/views/文件夹下
2)每个页面组件都是一个.vue文件
3) 每个.vue文件中都包含三部分:
<template>
//编写当前页面组件的HTML片段
</template>
<script>//原页面组件对象中所有js内容，不再含template属性
...
export default {
data(){
return { ... }
},
...
}
</script>
<style>
//当前页面所需的css样式，注意组件间样式冲突
</style>
6.路由器对象 src/router/index.js
脚手架工具创建项目时选择了路由模块vue-router的话，会自动创建该路由器对象，同SPA中的路由器对象几乎完全一样。
const router = new VueRouter({
routers:[
{path:"/",component:Index},
{path:"/details/:lid",component:Details,props:true},
...
{path:"*",component: NotFound }
]
})
export default router
说明: 同时router对象已经在main.js中被加入到newVue()里了.
7.scr/components文件夹
项目中如果有全局公用的组件，保存在这里。
再次说明：
HBuilderX创建的Vue项目，不会自动添加vue-router、vuex模块，在src目录下也没有router、store文件夹，也没有views文件夹，后续可以自行安装添加的。
5.Vue项目的主要文件
5.1 编译入口文件main.js
main.js中放根组件new Vue({})以及对new Vue()的配置（全局组件）
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
5.2 入口组件文件app.vue
App.vue 只放根组件
<template>
<div id="app">{{BASE_URL}}
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
<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>
5.3 单页面文件index.html
项目编译时main.js中new Vue() 和App.vue中的< div id=“app”>会重新被编译到唯一完整的index.html页面内。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>default</title>
</head>
<body>
<noscript>
<strong>We're sorry but default doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
6.运行Vue项目
新创建完的项目源代码包含示例网页，用HBuilderX或vscode打开刚创建的项目文件夹，右键点击项目中的package.json文件，选择在终端/命令行中打开。在弹出的命令行窗口中，输入npm run serve
npm run serve 做了两件事:
- 编译脚手架项目代码为浏览器认识的ES5代码。
- 同时启动简易开发服务器运行网站中网页。
浏览器运行结果如下：
运行时终端窗口如下。
7. 前端项目开发工程化
1、前端项目时需要编译（构建）的
通过终端运行命令 npm run serve ，其实脚手架工具做了两件事
- 编译脚手架项目代码为浏览器认识的ES5代码。
- 同时启动开发环境内置的Web服务器运行网站中网页。
Vue脚手架开发的前端项目需要编译的。为什么要编译呢？不编译行吗？
2、前端项目的功能演变
- 单机应用:
- 互联网应用：C/S模式、B/S模式
- 网络模型的变化:
- 以前网页大多是b/s，服务端代码混合在页面里；
- 现在是c/s，前后端分离，通过js api(类似ajax的uni.request)获取json数据，把数据绑定在界面上渲染。
- 移动应用：App（原生 、混合）、小程序、H5、公众号…
3、前端项目需要用工程化开发，需要模块化、组件化来实现
- 前端要处理的功能越来越复杂了。
- Vue项目：编译、打包、部署。
- 项目的目录结构、文件命名等一系列的开发过程规范要求。
- 前端同后端交互的唯一途径：API接口文档。