vue.js框架入门学习I
来源:互联网 发布:csol大刀优化参数 编辑:程序博客网 时间:2024/06/09 19:06
最近开始学习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
> my-project@1.0.0 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
> node build/dev-server.js
> Starting dev server...
DONE Compiled successfully in 6068ms 14:34:22
> Listening at http://localhost:8989
---------------------------------------------------------分割线-------------------------------------------------------------
这次的学习中碰到了这么一个问题,在最后一步的时候报错了。
cnpm run dev
> my-project@1.0.0 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! my-project@1.0.0 dev: `node build/dev-server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-project@1.0.0 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 trafficvar port = process.env.PORT || config.dev.port
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。
在下小菜一只,希望大神们可以不吝赐教,感激不尽~
阅读全文
0 0
- vue.js框架入门学习I
- Vue.js框架简易入门
- 常用js框架之vue.js入门
- 前端框架vue.js 学习
- 前端框架vue.js学习
- Vue.js 学习1 入门
- 前端热门框架Vue.js入门篇
- 前端框架之Vue.js学习总结
- Vue.js学习 Item1 --快速入门
- Vue.js入门学习(1)
- Vue.js入门学习(2)
- vue.js入门学习笔记整理
- Vue框架快速入门
- Vue.js UI框架
- Vue.js UI框架
- Vue.js UI框架
- Vue.js UI框架
- Vue.js UI框架
- 剑指offer题解C++【4】重建二叉树
- 对于Android中接口回调机制的理解
- liferay-ui:tabs
- HDU6044 Limited Permutation (递归,预处理阶乘逆元)
- 手机网页图片自适应大小 background-size css 图片全屏 背景尺寸设置
- vue.js框架入门学习I
- _tmain和main的区别
- ora-14551 cannot perform a DML operation inside a query
- android TextView加边框&drawable开发
- CSS 样式书写规范
- lua中的协同程序
- 博主招募令 | 技术大舞台 有才你就来!【微信小程序联盟】
- Android一步一步带你实现RecyclerView的拖拽和侧滑删除功能
- react native样式设计