使用vue-cli脚手架+webpack搭建vue项目

Techgogogo 2019-06-28

前言

世间万难 无非一拖二懒三不读书 对 说的就是我

突然觉得这句话说的很对,自从上次写完nodejs安装及npm全局模块路径的设置已经过去两月有余,而我的vue框架学习也就止步于此。还是没有给自己施加压力,浑浑噩噩的又度过了这么长时间,想想就很愧疚。(其实是懒癌患者)或许自己还是个少年吧,比较彷徨。

学习真的是自己的事,自己不想学,自制力不够,半点不由人。毕竟学无止境,而且技术的更新速度又非常快,应当时刻保持敬畏之心。当然也不是一件事没做,最近在看《JavaScript设计模式》(张容铭著)一书,收获颇多。对于JavaScript的面向对象有了更深的见解,对原型及原型链,以及对象的封装、继承、多态有了新的认识。但今天的重点不在于此,只是想通过写文章记录下自己在vue框架学习上的积累。

首先安装node.js并设置其环境变量

这里我就不多说了,毕竟上篇文章已经写的很清楚了。请戳:nodejs安装及npm全局模块路径的设置,安装设置完成后,为了验证安装是否正确,请window+r,输入cmd,快捷打开cmd控制台后,在命令行输入以下内容:

// 查看node安装是否正常
node -v 
// 回车后看到输出当前安装node的版本号,例如:v8.11.1,即安装正常

由于目前nodejs中已经集成了npm,所以我们在命令行输入以下内容,就可查看npm是否安装。

// 查看npm安装是否正常
npm -v 
// 回车后看到输出当前安装npm的版本号,例如:5.6.0,即安装正常

通过以上步聚,说明已经安装完nodejs并能正常运行。

其次安装vue、vue-cli脚手架和webpack打包工具

第一步已经安装完node及npm包管理工具,接下来就很好办了,直接在cmd命令行中输入:

1.安装vue

// 下载安装vue
npm install vue -g (-g表示安装全局模块的意思)

2.安装vue-cli

// 下载安装vue-cli脚手架
npm install vue-cli -g (-g表示安装全局模块的意思)

3.安装webpack

// 下载安装webpack打包工具
npm install webpack -g (-g表示安装全局模块的意思)

至此,以上三行命令表示将vue、vue-cli、webpack三个模块安装到了npm包管理工具设置后的全局路径中。

再次用vue-cli脚手架搭建vue项目

第二步将vue、vue-cli、webpack模块安装完成后,就可以使用以下命令创建vue项目了。

// vue init <template-name> [project-name]
vue init webpack vue-web

// 回车后有以下内容需要填写
Project name (vue-web)    // 项目名称
Project description (this is my first vue project)     // 项目描述(可以自行描述一段话)
Author (liwei)    // 项目作者
Vue build (standalone)    
Install vue-router? (Yes)    // 安装vue路由
Use ESLint to lint your code? (Yes)   
Pick an ESLint preset (none)
Set up unit tests (No)    // 单元测试
Setup e2e tests with Nightwatch? (No)    // 单元测试
Should we run `npm install` for you after the project has been created? (recommended) (npm)

cmd命令行填写完后直接回车就可以创建项目名称为vue-web的项目了。

最后检验vue项目是否创建成功

首先在cmd命令行中先进入到vue项目所在的路径下,然后输入:

// 安装package.json中的依赖
npm install 

// 运行项目
npm run dev
// 命令行显示无异常,然后可以在浏览器打开http:localhost:8080/#/查看结果

// 项目打包发布
npm run build(暂时不做过多介绍)

小结

通过以上步聚,就可以完成vue-cli配合webpack搭建vue项目的开发。当然,开发的过程中存在不少要填的坑,其实每走一步,都是很成功的。

你必须不停地奔跑 才能留在原地

共勉。

相关推荐