VUE入门实践（1）

一、简介

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

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

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

二、环境准备

2.一、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.二、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.三、建立VUE项目

vue create my-project
复制代码

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

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

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

询问项目的路由模式是否使用History，选择是，而后接下来会进行一些列的配置询问，本身看着须要选择就好了

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

|-- .eslintrc.js # ES-lint校验
|-- .gitignore # git忽略上传的文件格式
|-- babel.config.js # babel语法编译
|-- package.json # 项目基本信息 |-- postcss.config.js # CSS预处理器(此处默认启用autoprefixer)

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

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项目就建立完成了。