直接把操作的命令全部复制到这里来

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的如下代码删掉。

版本不一样,代码可能和上面不一致,具体查找方法,在如下对应的位置找

找test里面含有.js和.vue,loader为eslint-loader的。
2、默认启动端口更改。
如果我们的8080端口在使用中,是启动不成功的,但如果关掉,但我们又不想关掉正在占用端口的程序,比如你启动了tomcat什么的。这个时候,我们可以采取的办法就是更改webpack默认的监听端口。更改方法就是找到build目录下的dev-server.js文件,里面有一行代码:var port = process.env.PORT || config.dev.port,这行代码的意思就是从配置文件中找默认端口,我们可以把它注释掉,然后自己写一行,var port = 1234(一个你电脑上没被占用的任意端口)。