基本命令

这个命令都是 vue-cli 提供的. 可以认为是 “webpack + vuejs”的结合。

建立新项目

  1. $ vue init webpack my_blog

这个命令会建立好一个文件夹。 具体的说明，见《Webpack下的Vuejs项目文件结构》 章节。

安装所有的第三方包

  1. $ npm install

这个命令是根据 “package.json” 文件中定义的内容，来安装所有用到的第三方js库。 所有的文件都会安装到 “node_module”目录下。

着急的同学还可以 输入 --verbose 命令，来查看运行细节：

  1. $ npm install --verbose

运行结果如下： 

  1. $ npm install --verbose
  2. npm info it worked if it ends with ok
  3. npm verb cli [ 'D:\\nodejs\\node.exe',
  4. npm verb cli   'D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
  5. npm verb cli   'install',
  6. npm verb cli   '--verbose' ]
  7. npm info using npm@6.1.0
  8. npm info using node@v10.5.0
  9. npm verb npm-session d1e752145cbb60ba
  10. npm info lifecycle test_vue_0613@1.0.0~preinstall: test_vue_0613@1.0.0
  11. npm timing stage:loadCurrentTree Completed in 1609ms
  12. npm timing stage:loadIdealTree:cloneCurrentTree Completed in 12ms
  13. npm timing stage:loadIdealTree:loadShrinkwrap Completed in 681ms
  14. ...

这样出现问题的时候，就很容易知道卡在哪里了。

在本地运行

使用下列命令：

  1. $ npm run dev

默认就会在 localhost 的 8080端口，启动一个小型的web 服务器。 性能可以完全满足开发使用，还具备代理转发等功能。

源代码发生改变的时候，服务器也会自动重启。 （偶尔需要手动重启）

运行的输入如下所示：

  1. dashi@i5-16g MINGW64 /d/workspace/vue_js_lesson_demo (master)
  2. $ npm run dev
  4. > test_vue_0613@1.0.0 dev D:\workspace\vue_js_lesson_demo
  5. > node build/dev-server.js
  7. [HPM] Proxy created: /api  ->  http://siwei.me
  8. [HPM] Proxy rewrite rule created: "^/api" ~> ""
  9. > Starting dev server...
  10.  DONE  Compiled successfully in 2373ms10:55:18
  12. > Listening at http://localhost:8080
  14.  WAIT  Compiling...11:02:14
  16.  DONE  Compiled successfully in 213ms11:02:14
  18.  WAIT  Compiling...11:06:09
  20.  DONE  Compiled successfully in 117ms11:06:09
  22.  WAIT  Compiling...11:06:26
  24.  DONE  Compiled successfully in 103ms11:06:26
  25.  ...

打包编译

  1. $ npm run build

该命令用来把 “src” 目录下的所有文件，都打包成 “webpack”的标准文件，供部署使用。 具体的内容见 《打包和部署》 这一章节。