创建Vue项目

创建Vue项目

vue是三大前端js框架之一，它的主要特点就是前后分离，双向绑定，使用vue和一些UI我们可以构建非常好的前端项目，

接下来开始创建你的第一个Vue项目

开发工具

首先，我们需要一个强大的开发工具，我这里推荐使用HbuilderX,他对Vue有着非常强大的支持，直接前往官网下载即可，普通版即可。

开始创建

1.选择项目位置

比如 E 盘，然后再用命令行 cd 到项目的目录中，执行(vue init webpack + 项目名称)，创建 vue 项目 vue-cli(项目名)

2.配置选项

• Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了 vueclitest
• Project description:项目描述，默认为 A Vue.js project,直接回车，不用编写。
• Author：作者，如果你有配置 git 的作者，他会读取。
• Install vue-router? 是否安装 vue 的路由插件，我们这里需要安装，所以选择 Y
• Use ESLint to lint your code? 是否用 ESLint 来限制你的代码错误和风格。我们这里不需要输入 n（建议），如果你是大型团队开发，最好是进行配置。
• setup unit tests with Karma + Mocha? 是否需要安装单元测试工具 Karma+Mocha，我们这里不需要，所以输入 n。
• setup e2e tests with Nightwatch? 是否安装 e2e 来进行用户行为模拟测试，我们这里不需要，所以输入 n

等待一会，就会显示创建项目创建成功

接下来去执行命令的目录你就会看见创建好的项目了

3.目录介绍

build：最终发布的代码的存放位置。

config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。

node_modules：npm 加载的项目所需要的各种依赖模块。

src：这里是我们开发的主要目录（源码），基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：

assets:放置一些图片，如 logo 等

components:目录里放的是一个个的组件文件

router/index.js：配置路由的地方

App.vue：项目入口组件（跟组件），我们也可以将组件写这里，而不使用 components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染，这里面的必不可少。

main.js ：项目的核心文件（整个项目的入口 js）引入依赖包、默认页面样式等（项目运行后会在 index.html 中形成一个 app.js 文件）。

static：静态资源目录，如图片、字体等。

test：初始测试目录，可删除

index.html：html 单页面的入口页面，可以添加一些 meta 信息或者同统计代码啥的或页面的重置样式等。

package.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。

README.md：项目的说明文件。

webpack.config.js：webpack 的配置文件，把.vue 的文件打包成浏览器能读懂的文件。

.babelrc:是检测 es6 语法的文件的配置

.getignore:忽略文件的配置（比如模拟本地数据 mock 不让他在 get 提交/打包上线的时候忽略不使用可在这里配置）

.postcssrc.js:前缀的配置

.eslintrc.js:配置 eslint 语法规则（在这里面的 rules 属性中配置让哪个语法规则失效）

.eslintignore:忽略 eslint 对项目某些文件的语法规则的检查

这就是整个项目的目录结构，其中，我们主要在 src 目录中做修改（模块化开发）。这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装。

4.安装依赖包/插件

在 package.json 可查看

1.命令行进入 vue-cli 项目中,执行 cnpm install

执行 cnpm install (npm 可能会有警告，这里可以用 cnpm 代替 npm 了，运行别人的代码需要先安装依赖)如果创建项目的时候没有报错，这一步可以省略。如果报错了 cd 到项目里面运行 cnpm install 或者 npm install

若拿到别人的项目或从 github 上下载的项目第一步就是要在项目中 cnpm install;下载项目所依赖的插件，然后 npm run dev 运行项目。

2.安装完成之后，我们到自己的项目中去看，会多一个 node_modules 文件夹，这里面就是我们所需要的依赖包资源。

5.运行项目

在项目目录中(E:\vue-cli)，运行命令 npm run dev （npm run start），会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

项目启动后，在浏览器中输入项目启动后的地址,会显示Vue的巨大LOGO