目   录

1、安装node.js

2、查看npm

3、安装cnpm

①新建文件夹

②通过淘宝镜像安装相关依赖

③显示当前镜像网址

④安装cnpm

4、安装vue-cli脚手架构建工具

①输入命令进行安装

②查看是否安装成功：

5、用脚手架创建vue项目 

①初始化项目

6、启动项目

①进入项目

②启动服务

③输入ip地址打开项目

 7、项目文件介绍

①目录介绍

②生命周期流程图

---

        Vue 提供了一个官方的 CLI，为我们快速搭建大型单页应用专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成 vue.js+webpack 的项目模板。

1、安装node.js

Node.js是前端的编译，是一个基于Chrome V8引擎的JavaScript运行环境。

下载 | Node.js 中文网

选择适合自己电脑操作系统的版本进行下载，并安装。

查看安装版本：

node -v

2、查看npm

npm包管理器是集成在node中的，所以直接在命令提示符输入：

npm -v

 就能查看到npm版本信息.

  

3、安装cnpm

安装cnpm之前我们先更改一下镜像源，提高下载安装速度。

①新建文件夹

新建一个文件夹testvue2：

D:\>cd testvue2

②通过淘宝镜像安装相关依赖

这里选择了设置registry持久使用：

npm config set registry http://registry.npm.taobao.org

③显示当前镜像网址

查看是否设置成功：

npm get registry

 如图所示： 

④安装cnpm

npm install -g cnpm

 如图所示：

4、安装vue-cli脚手架构建工具

①输入命令进行安装

cnpm install -g @vue/cli

如图所示：

②查看是否安装成功：

vue --version

或：

vue –V

如图所示：

5、用脚手架创建vue项目 

①初始化项目

a、输入创建项目命令，回车进入

vue create 项目名字(自己定义)

vue create vue-name

b、按下图所示进行选择进入，回车进入

default (babel, eslint) 默认套餐，提供 babel 和 eslint 支持。

Manually select features 自己去选择需要的功能，提供更多的特性选择。比如如果想要支持 TypeScript ，就应该选择这一项。 使用上下方向键来选择需要的选项。

使用 manually 来创建项目，选中之后会出现以下画面。

c、每一行按空格进行选择，全部选择好后再按回车进入下一个环节：

TypeScript 支持使用 TypeScript 书写源码。

Progressive Web App (PWA) Support PWA 支持。

Router 支持 vue-router 。 Vuex 支持 vuex 。

CSS Pre-processors 支持 CSS 预处理器。

Linter / Formatter 支持代码风格检查和格式化。

Unit Testing 支持单元测试。

E2E Testing 支持 E2E 测试。

d、按下图进行选择：

回车进入：

回车进入： 

 回车进入： 

 注意：? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?   In dedicated config files ❯ In package.json 配置文件存放的地方，我们选择 package.json：

回车进入： 

这是在创建项目的过程，等待项目创建成功！

6、启动项目

①进入项目

cd 项目名字(自己定义)

cd vue-name

②启动服务

npm run serve

③输入ip地址打开项目

 显示成功：

7、项目文件介绍

①目录介绍

assets： 是资源文件夹，通常我们会把图片资源放在里面；

components：文件夹通常会放一些组件；

router：文件夹里面放的是 VueRouter 的相关配置；

store：文件夹里面放的是 Vuex 的相关配置；

views：文件夹里面通常放置页面的 .vue 文件；

App.vue：定义了一个根组件。 main.js 是项目的入口文件；

main.js 入口文件分析。

import Vue from "vue";

import App from "./App.vue"; import router from "./router";

import store from "./store";

其通过 import 引入了 App 组件、VueRouter 配置 router、Vuex 配置 store

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

通过 new Vue () 创建 Vue 实例，并将 router、store 配置传入。通过 render 函数渲染组件 App。并将 Vue 实例挂载到 id 为 app 的 div 上。

②生命周期流程图