Vue使用简介

Vue:

node.js官网： https://nodejs.org/en/

vue官网：https://cn.vuejs.org/

常用开发技术组合：

         ElementUI 基于vue pc端的UI框架  
         MintUi    基于vue 移动端的UI框架

1、环境搭建
     1.1、环境要求：已经安装Node.js(验证: node -v , npm -v), NodeJS自带 Npm 包管理工具

              可以选择安装cnpm加速:  npm install -g cnpm --registry=https://registry.npm.taobao.org

              -g或--global: 全局安装

              验证: cnpm -v

    1.2、介绍

            单页面框架。

            基于模块化组件化的开发方式。

    1.3、搭建开发环境并创建一个vue项目

               安装vue脚手架工具(全局安装 vue-cli 【验证:vue -V】)): npm install --global vue-cli

               创建一个基于 webpack 模板的新项目(记得选好文件夹): vue init webpack demo01

               安装依赖并运行: cd demo01 

                                           npm install  (使用vue init webpack demo01创建项目时没有报错可以省略)

                                           npm run dev  (运行)

               简单创建项目方式(中小项目完全应付的过来): vue init webpack-simple demo02

另一种创建方式：vue create demo01

     1.4、vue偏门目录或文件介绍

        .babelrc ：es6特性浏览器还没有全部支持，但是使用es6是大势所趋，所以babel应运而生，用来将es6代码转换成浏览器能够识别的代码，官方解释,是下一代JavaScript 语法的编译器。

       .editorconfig ： 代码编辑环境配置文件，配置文件以及编码等信息，EditorConfig可以统一不同编译器的代码风格，便于组内代码风格等统一。

       .eslintignore ：可以指定要忽略的文件及文件夹（忽略eslint的检查）。

       .eslintrc.js ：eslint配置项，代码规范和错误检查工具。

       .gitignore ：指定git需要忽略的文件。

       .postcssrc.js ： 是一个后处理器，添加浏览器私缀，PostCSS提供了一个解析器，它能够将 CSS 解析成抽象语法树。

        package.json ：项目的描述文件，项目依赖的组建的版本，运行方式等配置。

        package-lock.json ： 锁定项目依赖的各个组件的版本，使项目的底层依赖稳定。

二、基本配置及讲解

    2.1、package.json

     "5.0.3"表示安装指定的5.0.3版本，"~5.0.3"表示安装5.0.X中最新的版本，"^5.0.3"表示安装5.X.X中最新的版本。

迅速ctrl+k,ctrl+t可以调节vscode背景色