31、基本命令( vue, vue-cli)

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

建立新项目

$ vue init webpack my_blog 

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

安装所有的第三方包

$ npm install 

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

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

$ npm install --verbose 

运行结果如下：

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

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

在本地运行

使用下列命令：

$ npm run dev 

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

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

运行的输入如下所示：

dashi@i5-16g MINGW64 /d/workspace/vue_js_lesson_demo (master) 
$ npm run dev 

> test_vue_0613@1.0.0 dev D:\workspace\vue_js_lesson_demo 
> node build/dev-server.js 

[HPM] Proxy created: /api  ->  http://siwei.me 
[HPM] Proxy rewrite rule created: "^/api" ~> "" 
> Starting dev server... 
 DONE  Compiled successfully in 2373ms10:55:18 

> Listening at http://localhost:8080 

 WAIT  Compiling...11:02:14 

 DONE  Compiled successfully in 213ms11:02:14 

 WAIT  Compiling...11:06:09 

 DONE  Compiled successfully in 117ms11:06:09 

 WAIT  Compiling...11:06:26 

 DONE  Compiled successfully in 103ms11:06:26 
 ... 

打包编译

$ npm run build 

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

版权声明：「DDKK.COM 弟弟快看，程序员编程资料站」本站文章，版权归原作者所有