使用脚手架（Vue-Cli）快速创建一个vue项目的步骤

一、安装vue

https://cn.vuejs.org/v2/guide/installation.html

二、先确定是否安装了node.js、npm和cnpm

• node.js的下载地址：Node.js
• NPM（node package manager）是随同node.js一起安装的包管理工具，能解决前端代码部署上的很多问题，常见的使用场景有以下几种：

        ①允许用户从NPM服务器下载别人编写的第三方包到本地使用。

        ②允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

        ③允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

        实际上，npm就是前端的Maven。

• 由于vue的安装与创建依赖node.js（JavaScript的运行环境）里的npm（包管理和分发工具），因此需要先确保安装node.js。

       1.首先从node官网下载并安装node，安装步骤很简单，只要一直点击下一步就可以了。 安装完成后，打开命令行工具（win+R）输入命令node -v，如下图，如果出现对应版本号，就说明安装成功了。

检测方式：​

       2.因为npm会随着node.js一起安装，所以，只要是node.js正常安装，就代表npm已经安装。

检测方式：​

       3.到这里node的环境已经安装完了,npm包管理工具也有了，但是由于npm的有些资源被墙，为了更快更稳定,所以我们需要切换到淘宝的npm镜像——cnpm。

安装cnpm

   点击进入淘宝的cnpm网站,里面有详细的配置方法。 或者直接在命令行输入：

npm install -g cnpm --registry=https://registry.npm.taobao.org

   然后等待，安装完成。 输入cnpm -v，可以查看当前cnpm版本

   使用方法：需要用到npm的地方直接使用cnpm替换就可以了。

三、安装vue脚手架：Vue-Cli

      vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。 下面介绍 vue-cli 的整个搭建过程。注意：以下内容是基于Vue-cli4.0以上版本的。

全局安装vue-cli

    安装地址：Vue CLI

全局安装vuecli（就相当与在本机的npm仓库中有了vuecli）：

//安装最新@vue/cli版本
npm install -g @vue/cli
//安装指定的@vue/cli版本    
npm install -g @vue/[email protected]
//卸载@vue/cli
npm uninstall -g @vue/cli
//查看远程仓库中的@vue/cli版本号:
npm view @vue/cli versions --json

检测方式：安装完成后，使用 vue -V 显示版本号来测试vue是否安装成功。

四、创建vue项目

        首先按win+R进入命令窗口，计划在E盘vueTest文件夹下创建项目，命令窗口输入 e: 回车，再输入 mkdir vueTest 回车创建 vueTest 文件夹，再输入 cd vueTest 回车进入 vueTest 文件夹下。

1.在命令行下进入到工作空间文件夹中，输入如下命令：
   vue create hello hello是工程名（注意：工程名必须全部小写）

2.然后按回车出现

   default (bable，eslint） // 默认（初学者建议用默认的）

   Manually select features // 手动 **选择手动创建项目

3.上图出现了两种选项，默认和手动创建项目（初学者建议使用默认的）

  第一种方式（默认创建）：

      ①如果不需要太多功能的话可以选择快速创建。选择第一个直接回车，进行项目创建，接下来 耐心等待安装，最后出现

      ②按照提示在cmd窗口中进入工程根目录（cd hello）,输入：npm run serve启动工程，如：

      ③启动成功

 

      ④在浏览器中测试：在地址栏中输入http://localhost:8080，正常打开网页表示项目启动成功

 

   第二种方式：手动创建项目（Manually select features）

      ①这次我们选择手动创建项目，选择第二个回车（键盘上下键选择）

  通过 ↑↓ 箭头选择依赖，按 “空格” 是否选中，按 “a” 全选，按 “i” 反选。

1. Babel：转码器，可以将ES6代码转为ES5代码，可兼容不支持ES6的浏览器。
2. TypeScript：是JavaScript的超集（.ts文件），包含并扩展了 JavaScript 的语法。需要被编译输出为 JavaScript在浏览器运行。
3. Progressive Web App (PWA) Support：渐进式Web应用程序
4. Router ：vue-router（vue路由）
5. Vuex ：vuex（vue的状态管理模式、store）
6. CSS Pre-processors ：CSS 预处理器（如：less、sass）
7. Linter / Formatter：代码风格检查和格式化（如：ESlint）
8. Unit Testing ：单元测试（unit tests）
9. E2E Testing ：e2e（end to end） 测试。

        第一次创建工程时，可以只选择Babel和Router，Vuex，CSS Pre-processors即可。

      ②选择是否使用历史路由器，也就是询问路径是否带 # 号，这里选择 n。

      ③这一步提示我们在项目里面需要支持何种动态样式语言，我们选择第二个（上下键移动键），回车 

      ④询问将依赖文件放在独立文件中，还是package.json中：为了保持工程配置文件的整洁性，这里选择“In package.json”。

      ⑤询问是否将当前选择保存以备下次使用。这里选择“n”。回车

       ⑥接下来耐心等待安装：最后出现：

      ⑦按照提示，在cmd窗口进入工程根目录（cd hello）。 输入：npm run serve 启动工程。如：

      ⑧启动成功

     ⑨  在浏览器中测试：在地址栏中输入http://localhost:8080，正常打开网页表示项目启动成功。

 

关于脚手架的一些内容补充

一、Vue-cli工程目录结构及运行分析

 

1.package.json文件：配置了本工程中安装的模块（可以在这里查看安装的模块是否安装成功）

//在package.json文件中配置本工程中安装的模块（可以在这里查看安装的模块是否安装成功）
"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
},


//在package.json文件中有这样的配置：
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
}

让我们知道npm run serve命令，实际上就是运行“vue-cli-service serve”

 2.html入口文件：public目录中的index.html文件。在此文件中有一个总容器：

注意：整个工程中只有index.html一个页面，所以，Vue-cli工程就是一个SPA（单页应用）工程。

3.javascript入口文件：src目录中的main.js文件。在入口js文件中：

1. 首先导入了vue模块，路由模块和App.vue主vue组件。
2. 然后创建了一个Vue实例。
3. 在此Vue实例中，调用了render（渲染视图函数）函数，此函数返回App.vue主组件。也就是使用App.vue来渲染index.html视图组件。
4. 最后，使用$mount方法，将index.html中的总容器（#app）挂载到Vue实例上。

 4.App.vue主组件：

template标签中书写当前组件html代码。这里调用了公共组件HelloWorld。
script标签中书写当前组件的js代码。这里导入了HelloWorld公共组件成为子组件。
style标签中书写当前组件的css代码。

注意：一个vue文件，就是一个Vue组件

 5.HelloWorld.vue公共组件：这是vuecli给我们提供的一个示例组件。至此，我们终于知道：为什           么运行后浏览器中会显示这样的页面。

二、Vue-cli工程配置文件

       vuecli3.x以上版本中为了精简配置文件，专门设置了一个可选的配置文件。 只要在项目的根目录（与package.json同级）中，添加名称为vue.config.js的文件，就能自动被vue-cli加载。 在此文件中可以配置vuecli工程中的一些配置。

module.exports = {
    devServer: {
        port: 8088     //修改启动端口
    }
}

 三、Vue-cli的打包部署

    1. Vue-cli工程为什么要打包部署？

     我们所完成的工程，最终都是要部署到服务器（Tomcat、Nginx等等）上运行的。但是，服务器是不可能识别vue文件的，因为vue文件只是Vue-cli工程中的一种自定义文件。所以，我们需要将vue文件中的html代码、css代码、js代码抽取出来，重新打包成真正的html文件、css、文件和js文件，然后才能部署到服务器上。

 2.Vue-cli工程打包配置

   在vue.config.js文件中添加如下配置：

module.exports = {
    //打包基本目录
    publicPath:'./',
    //输出目录
    outputDir:'dist',
    //静态资源目录
    assetsDir:'assets',
    ... ...
}

  在命令行中进入到工程目录，运行如下命令：

npm run build

在工程目录中，就会出现 "dist" 目录，这就是打包好的工程

 注意：打包工程必须要放在一个 HTTP 服务器中才能运行。