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 只放根组件

的HTML内容和根组件的css样式有（全局样式）

<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接口文档。

Vue教程03-Vue脚手架开发环境相关推荐

Vue快速上手笔记2 - 开发环境的搭建
Vue快速上手笔记2 - 开发环境的搭建 CSDN:JcLee95 邮箱:291148484@163.com 专题目录:https://blog.csdn.net/qq_28550263/articl ...
vue多页面多路由开发环境
本人根据实际实战项目配置的vue多页面多路由开发环境,同时也支持单页应用开发.不懂的朋友可以留言. 项目代码链接:http://pan.baidu.com/s/1jI9ji2E
vue中控制mock在开发环境使用，在生产环境禁用
文章目录 vue中控制mock在开发环境使用,在生产环境禁用解决方案 vue中控制mock在开发环境使用,在生产环境禁用原因:mock拦截所有的axios请求,根据请求,做出相应的响应.平时前后端 ...
Xamarin Andro教程搭建Xamarin Androidid开发环境（一）
Xamarin Andro教程搭建Xamarin Androidid开发环境(一) "工欲善其事,必先利其器".对于程序员来说,编程的环境就是其手中的利器.如果没有一个合适方便的编 ...
vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{b:function(){ //默认调用getreturn 值}}--------------------------c ...
Microchip PIC系列8位单片机入门教程（一）开发环境建立
Microchip PIC系列8位单片机入门教程(一)开发环境建立作者:Greg 第一节开发环境建立条件软件: (1)MPLAB X:集成开发环境下载地址:https://www.microch ...
CAA教程——CATIA二次开发环境搭建
CAA教程--CATIA二次开发环境搭建前言开发环境搭建所需资源安装注意事项安装完成后的一些操作测试程序的运行效果 CATIA帮助文档的设置 VS里利用CATIA帮助文档的查询接口功能编译 ...
vscode使用教程python-用VScode配置Python开发环境
前言 VScode是一个相当优秀的IDE,具备开源.跨平台.模块化.插件丰富.启动时间快.颜值高.可高度定制等等优秀的特质,不愧是微软爸爸的私生子. 所以用VScode来编写Python,也是相当的好 ...
SAP系统和微信集成的系列教程之一：微信开发环境的搭建
系列目录 (1) 微信开发环境的搭建 ( 本文 ) (2) 如何通过微信公众号消费API (3) 微信用户关注公众号之后,自动在SAP C4C系统创建客户主数据 (4) 如何将SAP C4C主数据变化 ...

Vue教程03-Vue脚手架开发环境