vue.js框架入门学习I

最近开始学习vue.js,就在这儿记录下学习的过程和我自己碰到的一些问题，希望对看这篇文章的你能有帮助。

我主要是在菜鸟教程进行学习http://www.runoob.com/vue2/vue-tutorial.html，官方文档也要一起看https://cn.vuejs.org/v2/guide/syntax.html。

在学习前建议大家先安装下nodeJs和npm，也初步了解他们的操作和功能，方便后面的学习。

ps：windows下的cmd槽点太多，我用的命令行工具是cmder，更快更强大。

1.本地引入，可通过以下链接下载

http://vuejs.org/js/vue.min.js

2.npm方法(命令行方式，更适合程序员的逼格)

npm版本要大于3.0

# 查看版本

   npm -v

# 升级 npm

   cnpm install npm -g

用vue.js搭建大型应用时推荐使用npm安装

# 最新稳定版

   cnpm install vue

命令行工具

# 全局安装vue-cli

   cnpm install -g vue-cli

# 创建一个基于webpack模板的新项目

   vue  init  webpack  my-project

# 接下去的一些配置默认回车和yes就可以了

  

This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

进入项目，安装并运行：

cd  my-project

cnpm install

cnpm run dev

> [email protected] dev D:\nodeJs\my-project
> node build/dev-server.js


> Starting dev server...




 DONE  Compiled successfully in 6068ms                      14:34:22




> Listening at http://localhost:8989

成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：

---------------------------------------------------------分割线-------------------------------------------------------------

这次的学习中碰到了这么一个问题，在最后一步的时候报错了。

cnpm run dev

> [email protected] dev D:\nodeJs\my-project

> node build/dev-server.js

> Starting dev server...

events.js:160

      throw er; // Unhandled 'error' event

      ^

Error: listen EACCES 0.0.0.0:8080

    at Object.exports._errnoException (util.js:1026:11)

    at exports._exceptionWithHostPort (util.js:1049:20)

    at Server._listen2 (net.js:1244:19)

    at listen (net.js:1293:10)

    at Server.listen (net.js:1389:5)

    at EventEmitter.listen (D:\nodeJs\my-project\node_modules\.4.15.3@express\lib\application.js:618:24)

    at Object. (D:\nodeJs\my-project\build\dev-server.js:85:18)

    at Module._compile (module.js:570:32)

    at Object.Module._extensions..js (module.js:579:10)

    at Module.load (module.js:487:32)

    at tryModuleLoad (module.js:446:12)

    at Function.Module._load (module.js:438:3)

    at Module.runMain (module.js:604:10)

    at run (bootstrap_node.js:394:7)

    at startup (bootstrap_node.js:149:9)

    at bootstrap_node.js:509:3

npm ERR! Windows_NT 6.1.7601

npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\lenovo\\AppData\\Roaming\\npm\\node_modules\\cnpm\\node_modules\\npm\\bin\\npm-cli.js" "--userconfig=C:\\Users\\lenovo\\.cnpmrc" "--disturl=https://npm.taobao.org/mirrors/node" "--registry=https://registry.npm.taobao.org" "run" "dev"

npm ERR! node v6.9.1

npm ERR! npm  v3.10.10

npm ERR! code ELIFECYCLE

npm ERR! [email protected] dev: `node build/dev-server.js`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the [email protected] dev script 'node build/dev-server.js'.

npm ERR! Make sure you have the latest version of node.js and npm installed.

npm ERR! If you do, this is most likely a problem with the my-project package,

npm ERR! not with npm itself.

npm ERR! Tell the author that this fails on your system:

npm ERR!     node build/dev-server.js

npm ERR! You can get information on how to open an issue for this project with:

npm ERR!     npm bugs my-project

npm ERR! Or if that isn't available, you can get their info via:

npm ERR!     npm owner ls my-project

npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:

npm ERR!     D:\nodeJs\my-project\npm-debug.log

我一抹额前长发，看到了8080端口，估计问题就是出在这儿了，去查了下，发现果然是被system占用了，又不能强行关闭它，只好给vue换一个端口号了

那么他是在哪儿配置的呢，看到这句> node build/dev-server.js，于是我找到了dev-server.js文件，找到了这句

// default port where dev server listens for incoming traffic
var port = process.env.PORT || config.dev.port

我就开始去找config：

var config = require('../config')

好，接下来就来到了根目录下的config文件夹，一眼看到了index.js,就是他了，果然看到这段

dev: {
    env: require('./dev.env'),
    port: 8080,
    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
  }

对的上，然后我就把端口改成了8989，再运行一遍，successful。

在下小菜一只，希望大神们可以不吝赐教，感激不尽~