直接把操作的命令全部复制到这里来
C:\Users\Administrator>npm install vue-cli -g
C:\Users\Administrator>vue -V
2.8.2
C:\Users\Administrator>G:
G:\>cd /me
G:\me>vue init webpack vuefirst
? Project name vuefirst
? Project description 我的第一个vue项目
? Author veznlee
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
vue-cli · Generated “vuefirst”.
To get started:
cd vuefirst
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
G:\me>cd vuefirst
G:\me\vuefirst>npm install
> fsevents@1.1.2 install G:\me\vuefirst\node_modules\fsevents
> node install
npm notice created a lockfile as package-lock.json. You should commit this file.
added 1023 packages in 161.566s
G:\me\vuefirst>npm run dev
> vuefirst@1.0.0 dev G:\me\vuefirst
> node build/dev-server.js
> Starting dev server…
events.js:182
throw er; // Unhandled ‘error’ event
^
Error: listen EADDRINUSE :::8080
…此处省略若干错误语句
npm ERR!
npm ERR! Failed at the vuefirst@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2017-07-20T0
5_45_50_259Z-debug.log
第一次启动失败了,原因是我开了一个tomcat,占用了8080端口,于是我把tomcat关了,再启动。注意,默认的启动服务端口是8080端口,如果你有开启其他什么服务,最好保证你的8080端口没被占用,否则先关掉其他服务。如果看到上面我用红标的那句话,你就要注意了,他的意思是启动不成功不是npm的问题。
G:\me\vuefirst>npm run dev
> vuefirst@1.0.0 dev G:\me\vuefirst
> node build/dev-server.js
> Starting dev server…
DONE Compiled successfully in 2560ms 13:46:51
> Listening at http://localhost:8080
此时已经可以访问页面了。如果你的浏览器没有自动打开,复制http://localhost:8080到地址栏访问即可。
接下来,就可以开始我们的项目了。
先说两个技能点。
1、eslint默认的验证机制很烦人,多一个空格少一个空格都会报错,虽然代码格式很重要,但对一个刚接触webpack的人来说,里面的验证机制太严格了,大大的影响了我们的使用。去掉验证机制的方法:将webpack.base.conf.js的如下代码删掉。
1 2 3 4 5 6 7 8 9 |
{ test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter') } }, |
版本不一样,代码可能和上面不一致,具体查找方法,在如下对应的位置找
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
module.exports = { entry: { }, output: { }, resolve: { }, module: { rules: [ //在这里找 ] } } |
发表评论