Vue教程1-创建项目

创建项目

Vue创建项目使用脚手架vue-cli更为简洁方便。

Vue-cli

vue-cli是官方为开发者设计的用于创建项目的一款脚手架，可以帮助用户自动集成各种开发环境、依赖配置等。

安装脚手架

首先，Vue的搭建是要建立在JS的编程基础，因此需要在电脑中全局安装Node.js（去官网便可以安装）。

安装成功后，在命令行中输入：

npm -v 

便可查看安装的Node版本，同时npm是Node开发中的一个命令，通过npm便可以进行各种依赖的安装。

之后通过npm便可以全局安装vue-cli。

npm install  -g vue-cli

创建项目

创建项目之前需要全局安装webpack，而现如今webpack主要版本为4，而webpack@4需要安装webpack-cli，因此需要：

npm install webpack-cli -g // 全局安装webpack-cli
npm install  webpack -g // 全局安装webpack

由于我个人现在使用的vue-cli版本是 Vue CLI 2.9.6 所以创建项目是通过：

vue init webpack project_name

而如果选择 Vue CLI 3, 命令则是：

vue create project_name

两者是有区别的，使用2.x版本，创建出来的项目会多出来 build、config这两个目录，这两个目录是用来配置webpack和链接浏览器的，而3.x版本是没有的，会更加简洁，但是如果需要更改配置就会需要手动创建，较为麻烦，而我为了简单一点，选择了2.x版本，至少一些配置是显式的表现出来。

项目结构

当我们创建完项目之后，我们就可以打开项目看看里面的结构了，编译器我选择的是webstorm（这个公司的产品是一系列的，有IDEA、pycharm等等，通用一个账号，可以申请学生账号免费使用）

就讲几个用得到的：

build: 主要是webpack的配置，没啥大事不用动。

config: 主要是用来设置发布在dev或者pro环境配置的，一般没啥大事也不用动。

想要知道里面的具体内容 =》百度啥都知道

node_modules: 这个文件夹刚刚创建的时候没有，所以需要我们打开编译器左下角的terminal，在里面输入npm install，这个命令是在帮我们下载项目依赖的，然后把依赖文件就放在了node_modules里面，所以当我们无论什么情况下出现node_modules里面的错误时，那么一个解决思路就是我们的依赖出现了问题，这时候就可能是：

1、依赖的版本号发生冲突了
2、依赖的下载路径错了

那么我们如何解决的，这时候，请打开文件：

package.json: 这个里面放的全都是依赖和他们的版本号，而且假如我们又需要新的依赖了，那么我们肯定会使用 npm install XXX，XXX及其版本号会在下载完成后出现在这个文件里面，假如版本号发生错误了，来这里看看吧

src：这个文件夹就是咱们项目的核心文件夹了，所有的代码基本都在这里面。
1、main.js

系统的入口文件，，此时咱们就可以拓展的讲一下系统的运行思路了。
首先，在main.js文件做下面，有一个下面的代码块：

new Vue({
	el: '#app',
	router,
	store,
	template: '<App/>',
	components: { App }
})

具体的知识点在接下来的教程里，咱们主要看 el：’#app’，他在告诉你，我创建了一个Vue实例，用的template模版是id叫做app的，同时

template:  '<App/>' 
components: { App } 

也在说，看看页面最上面，应该有 import App from ‘./App’，这也在说，整个Vue实例是在这个’./App’的加持下构建完成的，HTML就是在这个页面，这是我们就可以前往App.vue 文件了。

2、App.vue

一上来，就给我们看到了一个HTML代码块，只有那句router-view 看不太懂，没关系，我们忽略，就当一个标签，那么就是这个页面里面有一个router-view标签，它的意思就是，这个系统界面都是在router-view的加持下构架成功的，然后，我们再不明白也可以读懂router是路由的意思，这下明白了，界面是路由来控制的，那么我们就可以去看看路由文件了。

<template>
	<div id="app">
		<router-view></router-view>
	</div>
</template>

3、router/index.js

这里就是用来存放路由地址和路由对应界面的地方，至于知识点，之后再说。

剩下的文件基本没有过多复杂的操作都可以暂时性的忽略。想要进一步了解=》百度啥都知道