Vue脚手架项目流程

一、Vue脚手架的安装

1、node.js安装

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

nvm工具的下载和安装：
1、https://www.jianshu.com/p/d0e0935b150a
2、https://www.jianshu.com/p/622ad36ee020

常用nvm命令：

nvm list   # 列出目前在nvm里面安装的所有node版本
nvm install node版本号      # 安装指定版本的node.js
nvm uninstall node版本号    # 卸载指定版本的node.js
nvm use node版本号          # 切换当前使用的node.js版本	

Node.js是一个新的后端(后台)语言，它的语法和JavaScript类似，所以可以说它是属于前端的后端语言，后端语言和前端语言的区别：

• 运行环境：后端语言一般运行在服务器端，前端语言运行在客户端的浏览器上
• 功能：后端语言可以操作文件，可以读写数据库，前端语言不能操作文件，不能读写数据库。

我们一般安装LTS(长线支持版本)：

下载地址：https://nodejs.org/en/download/【上面已经安装了nvm，那么这里不用手动安装了】
使用node -v命令可以查看当前node.js版本

2、npm

在安装node.js完成后，在node.js中会同时帮我们安装一个npm包管理器npm。我们可以借助npm命令来安装node.js的包。这个工具相当于python的pip管理器。

npm install -g 包名              # 安装模块   -g表示全局安装，如果没有-g，则表示在当前项目安装
npm list                        # 查看当前目录下已安装的node包
npm view 包名 engines            # 查看包所依赖的Node的版本 
npm outdated                    # 检查包是否已经过时，命令会列出所有已过时的包
npm update 包名                  # 更新node包
npm uninstall 包名               # 卸载node包
npm 命令 -h                      # 查看指定命令的帮助文档

3、vue-cli安装

我们可以使用npm来安装vue，如果速度过慢，推荐使用阿里镜像：
安装命令：

# 常规安装方法
npm install -g vue-cli
# 阿里镜像安装
npm install -g vue-cli --registry https://registry.npm.taobao.org

二、初始化一个vue项目

我们可以使用以下命令来初始化一个vue项目：

vue init webpack 项目名

接下来根据提示完成项目安装：

安装完成后项目目录如下：

接下来我们可以使用如下命令来将项目跑起来(一定要进入项目目录之中启动)：

npm run dev # 启动项目

如图，启动成功，根据输出信息我们在浏览器中访问vue项目：

至此，一个基本vue项目搭建完成。

三、项目目录结构

1、主要目录

目录	介绍
src	主开发目录，要开发的单文件组件全部在这个目录下的components目录下
static	静态文件资源目录，所有css、js、图片、音频等需要放在这个文件夹
dist	项目打包发布文件夹，最后要上线单文件项目文件都在这个文件夹中[后面打包项目,让项目中的vue组件经过编译变成js 代码以后,dist就出现了]
node_modules	目录是node的包目录
config	配置目录
build	项目打包时依赖的目录
src/router	路由,后面需要我们在使用Router路由的时候,自己声明

2、核心文件

文件	介绍
index.html	vue项目的访问入口文件
main.js	导入App组件，并引入vue核心模块
App.vue	vue项目主组件
router/index.js	主路由文件
components/*	vue项目子组件

3、关系图

四、vue-router

vue-router提供了vue中必要的路由功能，我们可以根据路由来访问不同的组件。

1、基本写法及传参的使用

首先我们创建两个新组件，使用props进行传参：

main.vue:

<template>
  <div class="Main">
    <h1>page1</h1>
    {
  {page1}}
  </div>
</template>

<script>
export default {
    
  name: 'main',
  props:["page1"]
}
</script>

page2.vue:

<template>
    <div>
      <h1>page2</h1>
      {
  {page2}}
    </div