Vue(一)：创建Vue项目以及理解Vue目录

Vue(一)：创建Vue项目以及理解Vue目录

​ 本篇文章默认你已经配置好node.js环境。我使用的开发工具为vscode，所以的命令都是在vscode的终端里面运行。

​ 我也是第一次接触Vue，所以写这篇博客来记录一下，之后忘记了还可以翻阅一下，做个记录。由于是第一次学习这个，我会把我所遇到的问题的解决方法都上传到博客，方便查阅。有需要的朋友可以看我的博客Vue系列。

​ 在vscode终端里面使用命令和Linux有点相似，cd切换目录，Tab键自动补全。

一、使用npm创建Vue项目

​ 1.打开vscode终端

​ 2.如果没有安装vue-cli(如果已经安装过了，直接跳过这步，进行下一步)，在终端输入：npm install -g vue-cli，全局安装vue-cli。可能npm有点慢。可以使用cnpm。

​ 3.创建项目，projectName是你自己需要创建工程的名字，项目名不能为大写或者驼峰式。

vue init webpack projectname

运行字段命令会出现以下引导句，初级的话一般按照下面这个来就可以了。

1.ProjectName  							项目的名字(回车就可)
2.project description   				项目描述，回车即可
3.author 								作者，回车即可
4.ue build  							打包方式，回车即可；
5.install vue-router  					是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
6.Use ESLint to lint your code  		是否需要 js 语法检测 目前我们不需要 所以 n 回车；
7.Set up unit tests 					是否安装 单元测试工具 目前我们不需要 所以 n 回车；
8.Setup e2e tests with Nightwatch 		是否需要 端到端测试工具 目前我们不需要 所以 n 回车；

二、项目安装完成后，更改两个配置

​ **1.**config文件夹下面的index.js中的autoOpenBrowser设置为true，表示启动项目时候自动打开默认浏览器，不需要每次输入地址才能打开。
​ **2.**打开package.json文件，把processg改为hot，每次运行项目的时候，终端就不会出现很多百分之的进程打印。

  "scripts": {
    "dev": "webpack-dev-server --inline --process --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

​ 3.在Vue文件中无法注释代码，进行如下操作：

​ 1.安装Vue 2 Snippets插件

​ 2.在settings.json中加入这个：“files.associations”: {"*.vue": “html”}

三、Vue目录讲解

​ 这篇博客主要是在于目录讲解，因为自己也是第一次学习，所以一些地方难免会存在错误，希望大家可以提出来，共同学习。我会以自己的理解来描述对目录的讲解。

|--build						// 项目构建(webpack)相关代码
	|--build.js					// 生产环境构建代码
	|--check-versions.js		// 检查node、npm等版本
	|--utils.js					// 构建工具相关
	|--vue-loader.conf.js		// webpack loader配置
	|--webpack.base.conf.js		// webpack 基础配置
	|--webpack.dev.conf.js		// webpack开发环境配置，构建开发本地服务器
	|--webpack.prod.conf.js		// webpack生产环境配置

|--config						// 项目开发环境配置
	|--dev.env.js				// 开发环境变量
	|--index.js					// 项目一些配置文件
	|--prod.env.js				// 生产环境变量
	|--test.env.js				// 测试环境变量

|--src							// 项目源码目录
	|--assets					// 资源目录，这里的资源会被webpack构建
	|--components				// vue公共组件目录
	|--router					// vue前端路由管理，决定页面的跳转规则
	|--App.vue					// 页面入口文件，所有自己的写的组件，都在这个组件之上
	|--main.js					// 程序入口文件，加载各种公共组件

|--static						// 纯静态文件，比如一些图片，json数据，不会被webpack构建
|--test							// 测试文件目录

|--index.html					// 入口页面
|--package-lock.json			// 普通package.json文件“^2.0”这样写的，意味着版本可以大于等于2.0，如此就会出现各种错误。
|--package.json					// 项目基本信息，包依赖信息，项目的配置文件，用于描述一个项目，包括我们init时的设置、开发环境、生成环境的依赖插件及版本等。
|--README.md					// 项目说明，Markdown文件

//下面这些文件入门的时候可以不用理会
|--.babelrc						// ES6语法语法编译配置
|--.editorconfig				// 定义代码格式，可以在这里修改编码、缩进等
|--.eslintignore				// 设置忽略语法检查的目录文件
|--.eslintrc.js					// eslint的配置文件
|--.gitignore					// git上传需要忽略的文件格式
|--.postcssrc.js				// postcss配置文件

我们主要是在src中进行操作，这里是我们开发的源码。