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 <[e-mail]>
? 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.<anonymous> (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。

在下小菜一隻，希望大神們可以不吝賜教，感激不盡~