1、简介

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

2、环境准备

2.1、Node.js安装(npm)

官网地址：

https://nodejs.org/en/download/

下载自己的版本，下载完成之后双击安装，在配置环境变量path，根据自己的安装路径配置即可

配置完成后，检查Node.js版本

node --version

NPM是随同NodeJS一起安装的包管理工具

允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功:

由于 npm 安装速度慢，也可以使用淘宝的镜像及其命令 cnpm，安装命令如下

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

# 查看版本
$ npm -v


#升级 npm
cnpm install npm -g


# 升级或安装 cnpm
npm install cnpm -g

在用 Vue.js 构建大型应用时推荐使用 NPM 安装

2.2、VUE安装

最新稳定版安装：

npm install vue

Vue.js 提供一个官方命令行工具（vue-cli，这里注意安装的是3.x的版本，与2.x的有差异），也叫脚手架

全局安装 vue-cli：

npm install -g @vue/cli

你还可以用这个命令来检查其版本是否正确 (3.x)：

vue -V

这样VUE以及脚手架就安装完成了。

2.3、创建VUE项目

vue create my-project

询问安装类型，按键盘上下键选择默认（default安装了balel、eslint其余要用什么，需要手动再安装）还是手动（Manually）,此处选择手动。

上面显示的v1.0 是我上一次创建时的配置，选好回车

询问项目的需求，上下键切换，空格选择，回车确认，选择一些会用到的即可。

询问项目的路由模式是否使用History，选择是，然后接下来会进行一些列的配置询问，自己看着需要选择就行了

等待项目创建成功，一些配置文件的作用

用编辑器打开项目看一下项目目录结构

vue.config.js配置文件

vue.config.js是一个可选的配置文件，如果项目的根目录存在这个文件，那么它就会被 @vue/cli-service 自动加载。你也可以使用package.json中的vue字段，但要注意严格遵守JSON的格式来写。这里使用单独配置vue.config.js的方式。

参考配置如下：

// vue.config.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
  // baseUrl从vue cli 3.3起已经弃用了，用publicPath来代替
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/', // 部署应用包时的基本URL(这里可以看一下官方说明)
  outputDir: 'dist', // 打包时生成的生产环境构建稳健的目录
  assetsDir: 'static', // 放置生成的静态资源的目录
  filenameHashing: true,
  lintOnSave: true, // eslint-loader会将lint错误输出为编译警告
  productionSourceMap: false, // 如果你不需要生产环境的source map，可以将其设置为false，以加速生产环境的构建
  configureWebpack: {
    // 简单/基础配置，比如引入一个新插件
    plugins: []
  },
  chainWebpack: config => {
    // 链式配置
  },
  css: {
    // css预设器配置项
    loaderOptions: {
      css: {
 
      },
      postcss: {
 
      }
    }
  },
  devServer: {
    open: true,
    host: '127.0.0.1',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null,
    // proxy: {
    //     '/api': {
    //         target: '<url>',
    //         ws: true,
    //         changOrigin: true
    //     }
    // },
    before: app => {}
  },
  // 第三方插件配置
  pluginOptions: {}
}

运行项目，项目创建完成之后也会提示我们启动命令

进入项目目录运行，访问127.0.0.1:8080 进入主页面

npm run serve

一个简单的VUE项目就创建完成了。