快速构建vue项目

随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)

一、简介

vue.js是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。更多详细介绍请移步vue官网。

二、webstorm安装

这里我们使用webstorm来作为IDE,WebStorm是jetbrains公司旗下一款JavaScript 开发工具，和IntelliJ IDEA同源，非常强大，关于他的下载和安装，网上有很多教程，这里就不多说了。

三、node.js的安装

Node.js是一个Javascript运行环境，关于node.js的更多详细介绍参考这篇文章：

初识NodeJS，一个基于GoogleV8引擎的Javascript运行环境

新版的node安装完成后，npm也安装完成了，npm介绍请参考：NPM 使用介绍

四、安装Git

参考：Git下载、安装

做好准备工作后，就可以开始创建vue项目了

五、使用vue-cli构建vue项目

vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板。

使用步骤如下：

建立一个项目的文件夹，我的命名为MyVueProject,然后进入到这个文件夹，右键，选择Git Bash Here。

输入命令行：npm install vue-cli -g(下载全局vue-cli)

下载完成后，输入命令行：vue init webpack myproject ,myproject 是项目名称。然后控制台会询问一些问题如下：

? Project name (myproject)  项目名称（myproject）（确定按enter，否按N） 

? Project description (A Vue.js project)
项目描述（一vue.js项目）。（随意输入一段简短介绍，用英文，不写直接回车也行）

? Author (yourname <youremail>)
输入作者，然后按enter,否则N

? Vue build (Use arrow keys)
> Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific H
TML) are ONLY allowed in .vue files - render functions are required elsewhere
直接翻译如下：Vue的建立（使用箭头键）>运行时+编译器：大多数用户推荐运行时间：约6kb轻民+ gzip，但模板（或任何Vue具体HTML）只允许在。VUE文件渲染功能是必需的其他地方。（按enter） 

? Install vue-router? (Y/n)
是否安装路由，建议安装。 输入Y回车

? Use ESLint to lint your code? (Y/n)
使用ESlint语法？（Y/ N）。（使用ESLint语法，就要做好心理准备，除非你非常懂ESLint语法，要不就会处处报错，之前不明白的时候选择过一次，总之很烦，若想要挑战一下，下面这个网址会给你帮助的：https://cloud.tencent.com/developer/chapter/12618        建议N） 
? Set up unit tests (Y/n) 设置单元测试？（Y / N）。（选N）

? Setup e2e tests with Nightwatch? (Y/n)
Nightwatch建立端到端的测试？（Y / N）。（选N）

? Should we run `npm install` for you after the project has been created? (recom
mended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself
(选择Yes，use NPM)

然后要等待一会，安装项目依赖

整个过程效果图如下：

现在项目已经创建好了，可以使用命令行直接启动

输入命令：cd myproject  进入到项目文件中

输入命令： npm install  初始化安装依赖
       输入命令： npm run dev  执行

启动好，就可以在浏览器输入http://localhost:8080看到欢迎页面，注意如果8080端口已经被占用，控制台会使用其它端口，有提示。

六、在webStorm中运行

如果在IDE运行工程，就用webStorm打开刚刚创建的工程

 

启动完成后，控制台会看到网址

由于刚刚使用了8080和8081端口，这里启动的8082端口，在浏览器输入该网址，可以看到一样的欢迎页面。

结合webStorm构建vue.js项目就介绍到这里。