在上一篇文章中已经介绍过用cdn的方式使用vue。这次改为在nodejs中搭建vue项目。
在nodejs环境和各种工具的帮助下你可以使用ES6语法,组件,模块来开发web应用,使前端开发更加工程化。
打开nodejs官网
选择左边推荐版本 ,下载安装。
安装完成后,打开CMD,输入node -v ,检查是否已经安装成功。显示版本号即表示成功安装了。
这里要插入介绍一下 npm(node package manager)node自带的包管理器,可简单理解为它是帮助你下载安装或卸载包的工具。
输入 npm -v 可以检查npm版本
注意:我是已经安装过的了,版本号可能和大家下载的不一样。
vue-cli是搭建vue项目的脚手架。使用它可以快速形成项目的基本结构。
用npm全局安装vue-cli
install 即安装,“ -g ” 代表全局安装。
安装完vue-cli后可输入 vue -V 查看版本,注意这里的 “ -V ” 是大写的V。
注意:我是已经安装过的了,版本号可能和大家下载的不一样。
使用vue-cli 创建项目
使用 vue init webpack my-project my-project 是自定义的项目名字,webpack指用webpack来打包
这时候已经下载了项目基本模板,但是没有安装依赖,所以还不能运行。
转到项目文件夹 cd my-project
安装依赖 npm install
稍等一会儿,可能会有点点慢。
如果实在是慢的不行,可以改用淘宝映射
npm install -g cnpm --registry=https://registry.npm.taobao.org安装完后,就可以运行啦。
使用 npm run dev 或者 npm start
这是正在运行中。
显示这个界面时就已经可以了,在浏览器打开 http://localhost:8080
这样就已经运行你的第一个vue项目了噢,很简单吧。