2018-03-02

利用vue-cli搭建vue项目（基础）

摘要：关于利用vue脚手架搭建vue项目概要

如果说快速开发一个vue项目的话，一般我们会利用脚手架搭建，也就是vue-cli。因为在脚手架内整合了整体的项目架构以及webpack，对于新手搭建项目也是不错的选择，但是还是要和大家收一下，如果是初学者的话还是手动搭建vue项目更有助于你学习这个框架。

1.首先你要在本地安装运行环境node和npm
    安装node可在官网找安装包安装因为现在node融合了npm包管理工具，也就是说你只要安装了node就自带npm，安装完成后在cmd命令行中编写以下命令：


    node -v
    npm -v

    只要有输出版本号了，证明你已经安装好了node和npm。
2.第二步，就是安装全局脚手架，在cmd内输入一下命令：


    npm install -g vue-cli


3.第三步，就可以创建一个vue项目了，准确的说是一个模板项目，因为你以后所开发的内容都基于这个架构，首先要在你指定目录内建一个文件夹，在文件夹内打开cmd，输入以下命令：



    vue init webpack my-project    注意（my-project）是自己的项目名

回车以后等待输出：
    注意y表示yes，n表示no


    ？ Project name ( my-project ) 敲y, 回车既可

    ？project description ( A Vue.js project ) 敲回车既可

    ？Author ( xxxxxx <xxxxx@xx.com> ) 敲回车既可

    ？ Vue build ( user arrow Keys ) 敲回车既可

    ? Install vue-router？（Y/n）敲Y回车既可 （是否安装路由）

    ？Use ESLint to lint your code？ (Y/n) 敲n回车既可（是否安装路由）

    ？Set up unit tests (Y/n) 敲n回车既可 ( 单元测试， 个人觉得不安装选择n )

    ？Setup e2e tests with Nighwatch？(Y/n) (  e2e测试，个人觉得不安装选择n )

    ？Should we run `npm install` for you after the project has been created？ (recommended) (use arrow Keys)

    到目前为止，你的项目已经创建完成了，在你创建的这个项目文件夹打开cmd输入一下指令本地运行：


    npm run dev


4.第四步，就是用浏览器访问localhost:8080

启动成功