vue 项目安装 （入门）

由于vue越来越受欢迎，终于还是决定开始学习vue了。在前端这个行业，如果你不抓紧学习前沿技术，那么你会恐惧的发现自己生活在远古时代。

哈哈，跑偏了，第一次接触vue，内心是激动的。

按我的习惯，先上git，找个不错的项目研究研究。毕竟，站在巨人的肩膀，可以看得更远。
选了这位大神的项目https://github.com/bailicangdu/vue2-elm

按着项目运行步骤：

git clone https://github.com/bailicangdu/vue2-elm.git  

cd vue2-elm

npm install

npm run dev (访问线上后台系统)

冷冷的冰雨在脸上胡乱的拍。。。各种报错！！！

一定是我的打开方式不对，内牛满面。

又各种查阅资料，不断尝试，终于可以了。

这么刻骨铭心的经历，一定要分享出来，哈哈哈。

1. 检查是否已经安装了node和npm；

2..安装 vue-cli；

npm install -g vue-cli        // 安装
vue                           // 查看,这里会出现一些用法，指令之类的讯息
vue list                      // 会出现browserify , webpack 模板相关的讯息

3. 克隆vue2-elm项目到你指定的文件夹vueJs下；

cd vueJs

git clone https://github.com/bailicangdu/vue2-elm.git  

4. 在vueJs文件夹下，初始化模板，选择 webpack作为打包工具。

一般来说，语法是这样的： vue init 模板名 项目名称
(项目已存在，此步骤可跳过。)

vue init webpack vue2-elm              //默认为2.0了
// vue init webpack#1.0 sell1.0       //则为1.0版本
// 期间会有一些选项的设置
1. vue init webpack pname(你的项目名字)；

2. ? Project description (A Vue.js project) 新建项目(项目描述)；

3. ? Author (xxx) ；xxx(项目作者)；

4. ? Vue build
❯ Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
**这里选择Runtime + Compiler: recommended for most users；**

5. ? Install vue-router? (Y/n) y 是否使用vue-router，这里根据需求选择；

6. ? Use ESLint to lint your code? (Y/n) y 是否使用ESLint，这里根据需求选择；

7. ? Pick an ESLint preset (Use arrow keys)
❯ Standard (https://github.com/feross/standard)
Airbnb (https://github.com/airbnb/javascript) none (configure it yourself)
**这里选择Standard (https://github.com/feross/standard)**

8. ? Setup unit tests with Karma + Mocha? (Y/n) n 是否需要单元测试，这里根据需求选择；
 
9. Setup e2e tests with Nightwatch? (Y/n) n是否需要单元测试，这里根据需求选择；

5. 安装并运行模板

(1) 进入vue2-elm项目文件夹；

cd vue2-elm

(2) 安装vue2-elm项目；

npm install            // install 过程会比较慢，因为要下载一些依赖包(当然你也可以选择 cnpm 安装)，完成后 目录下 会多了一个 node_modules 文件夹

(3) 修改vue2-elm项目端口；

由于项目默认端口为8080，在我的电脑上已被占用。所以，需要修改端口配置。

项目结构：

- vue2-elm
        - build
        - config
            - index.js
        - elm
        - node_modules
        - screenshots
        - src
        - vue2-elm
        。。。

在config文件夹下的index.js里，有项目的配置信息。
修改port，为你想设置的端口，即可。

  dev: {
    env: require('./dev.env'),
    port: 9200,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }

(4) 运行vue2-elm项目；

npm run dev         

然后你的默认浏览器，华丽丽的打开了项目的首页。

不容易呀，配置这些环境。