java开发环境搭建——npm、cnpm创建vue工程

为了学习vue框架,了解到npm、nodejs。所谓工欲善其事必先利其器,二话不说先从node.js的下载安装开始,一步步搞到vue前台框架跑起来为止。前面博文已经安装好nodejs,下面开始学习npm、cnpm并使用cnpm安装vue

node.js下载安装可参考教程https://blog.csdn.net/qq_15903671/article/details/82052035

安装完成后node.js中就自动包含npm。输入npm -v 就可以查看当前npm版本

java开发环境搭建——npm、cnpm创建vue工程_第1张图片

由于npm很慢,建议更换成国内的淘宝cpnm,更换指令

npm install -g cnpm --registry=https://registry.npm.taobao.org

如下图已更换成功,后续可使用cnpm指令。

升级npm版本 cnpm install npm -g

java开发环境搭建——npm、cnpm创建vue工程_第2张图片

npm --version

cnpm --version

可以看到我的npm版本从5.6.0 升级到 6.4.0

java开发环境搭建——npm、cnpm创建vue工程_第3张图片

同步connect模块

cnpm sync connect

java开发环境搭建——npm、cnpm创建vue工程_第4张图片

安装vue指令 cnpm install vue

java开发环境搭建——npm、cnpm创建vue工程_第5张图片

安装vue-cli指令 cnpm install --global vue-cli

java开发环境搭建——npm、cnpm创建vue工程_第6张图片

现在已安装好vue,下面创建一个vue框架项目

使用 vue init webpack web-project 指令创建一个基于webpack的vue工程

java开发环境搭建——npm、cnpm创建vue工程_第7张图片

创建好后进入新建的vue工程目录,初始化项目,引入依赖

指令:cnpm install

java开发环境搭建——npm、cnpm创建vue工程_第8张图片

初始化之后vue工程中将出现node_modules文件夹,里面是所有的依赖包

下面就可以运行测试了,指令:cnpm run dev

java开发环境搭建——npm、cnpm创建vue工程_第9张图片

看到application is running...字样就说明vue工程已经运行起来了。

浏览器输入提示的url看看效果。

java开发环境搭建——npm、cnpm创建vue工程_第10张图片

 

你可能感兴趣的:(java开发环境搭建)