Vuejs初探以及VueCli脚手架搭建

1、背景

    主要介绍vue-cli搭建以及搭建过程中的问题

2、概念介绍

     什么是nodejs：它的作用就相当于java中jvm一样，是一个运行时环境。什么是npm：nodejs平台上的包管理工具，卸载安装运行等都是通过它进行。什么是vuejs：vuejs一个前端框架，相当于java后台ssm框架一样。vuejs全家桶包括：vue-router：路由，vuex：状态管理， vue-resource：请求工具，再加上构建工具vue-cli，什么是webpack：可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

3、安装介绍

    1）、vue的安装只需安装构建工具即可，其他的都会依赖安装，但是前提是需要安装node以及npm。命令：npm install --global vue-cli，这是全局安装的意思。如果安装成功会在C:\Users\用户\AppData\Roaming\npm，出现vue的运行工具。

安装过程报错信息：

              

  解决方法：

  1、 npm cache clean --force

  2、 再执行 npm install 操作

     2）、安装 webpack  npm install --global webpack，安装成功后在npm目录下如下

  

 4、vue-cli项目脚手架搭建

      直接在项目文件目录下运行语句： vue init webpack 项目名称

      示例如下：

      

 5、项目文件目录结构分析

   

   build：这里主要是放webpack的一些配置

   conifg ： vue项目的基本配置文件

   node_modules : 项目中安装的依赖模块 

   src : 源码文件夹，基本上文件都应该放在这里

   static : 生成好的文件会放在这个目录下。

   test : 测试文件夹，测试都写在这里

   .babelrc babel编译参数，vue开发需要babel编译 
   .editorconfig 看名字是编辑器配置文件，不晓得是哪款编辑器，没有使用过。 
   .gitignore 用来过滤一些版本控制的文件，比如node_modules文件夹 
   index.html 主页 
   package.json 项目文件，记载着一些命令和依赖还有简要的项目描述信息 
   README.md 介绍自己这个项目的，想怎么写怎么写。不会写就参照github上star多的项目，看人家怎么写的

  具体每个目录下的文件描述：可以参考博客: https://www.jb51.net/article/118561.htm