Vue学习日记01

记录下学习Vue的过程，加深印象。

什么是Vue？

vue是一个轻量级框架，与其他重量级的框架不同的是，vue采用自底向上增量开发的设计。使用vue只需要关注视图层，不过使用起来让我感觉最不错的是vue的响应式数据绑定和组合视图组件。

vue.js的使用？

vue.js的开发环境我使用的是webstrom。vue的环境搭建首先要安装node，借助node里面的npm来安装需要的依赖等等，网上教程很多而且按照步骤安装就可以了，就不说了。相信你在安装的时候肯定遇到了npm install vue-cli -g命令。那这到底是什么意思呢？

Vue-cli是什么？

它是一个vue.js的脚手架工具。就是一个自动帮你生成好项目目录，配置好Webpack，以及各种依赖包的工具。 -g是全局安装，这就表示打开命令行之后可以直接通过vue命令调用它。

项目目录结构的作用？

build 目录是一些webpack的文件，配置一些参数，一般不动。

config 是vue项目的基本配置文件

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

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

 ------assets  资源文件夹，里面放一些静态资源

 -------components  这里放的都是各个组件文件

 --------App.vue   App.vue组件

 ---------main.js   入口文件

static 生成好的文件都会放在这个目录下(css、js等)

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

.babelrc babelrc编译参数,vue开发需要babel编译

.editorconfig 编辑器配置文件

.gitignore 用来过滤一些版本控制的文件，比如node_modules 文件夹

index.html 主页

package.json 项目文件，记载着一些命令和依赖还有简要的项目描述信息

README.md 项目说明(介绍自己这个项目的)
下面说说这几个重要的文件
1.package.json文件。

dependencies：项目发布时的依赖
devDependencies：项目开发时的依赖
scripts：编译项目的一些命令

2.main.js

这里是入口文件，可以引入一些插件或静态资源，当然引入之前要先安装了该插件，在

package.json文件中有记录。

import Vue from 'vue'
import App from './App'
import VueRouter from "vue-router"
import VueResource from 'vue-resource'
import axios from 'axios'

3.App.vue

这是一个标准的vue组件，包含三个部分，一个是模板，一个是script，一个是样式

<template>
  <div id="app">
    <span>{{msg}}</span>
  </div>
</template>
 
<script>
import Hello from './components/Hello'
 
export default {
  name: 'app',
  data() {
 	 return {
   		msg: '我的Vue项目'
			 }
		  }
	}
</script>
 
<style>
  #app{color:yellowgreen}
</style>

项目中遇到的问题

1.遇到了初学者一般才会遇到的问题

编写代码时遇到空格就会报错 ，是因为出现空格不规范的原因，是在创建项目的时候引起的。主要错误如下图所示：

解决办法：找到目录(或build)下的webpack.config.js（或webpack.base.conf.js）文件，把其中的rules里的这一段注释掉：

如何创建新的vue项目?

快捷键win+R输入cmd,输入vue init webpack 工程名(不能为中文)；

或者vue init webpack-simple 工程名。

webpack和webpack-simple，两者的区别

webpack-simple创建的，适用于中小型项目，webpack.config.js就在目录下；webpack的则适用于大型项目，webpack.config.js文件给配置到 build=>webpack.base.conf.js文件中，所以没有该文件名称。