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的运行工具。

安装过程报错信息:

              Vuejs初探以及VueCli脚手架搭建_第1张图片

  解决方法:

  1、 npm cache clean --force

  2、 再执行 npm install 操作

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

  

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

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

      示例如下:

      Vuejs初探以及VueCli脚手架搭建_第2张图片

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

   Vuejs初探以及VueCli脚手架搭建_第3张图片

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

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

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

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

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

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

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

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

 

你可能感兴趣的:(前端框架)