因项目需要用到vue前端,作为前端小白,参考了网络上一些资料结合自己的理解, 将自己的搭建过程记录下来,当做学习的过程。
1.Node.Js安装
官网 https://nodejs.org/zh-cn/下载windows
检查是否安装成功,在WIN+R,输入CMD,在命令行输入:node -v和npm -v,能够查看对应的版本,则证明安装成功。
2.NPM
npm 和 cnpm 的区别:两者之间包管理器的不同;npm是node官方的包管理器。cnpm是个中国版的npm,是淘宝定制的;如果因为网络原因无法使用npm下载,那cnpm这个就派上用场了。同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
WIN+R,输入CMD,在命令行输入:
npm install -g cnpm --registry=https://registry.npm.taobao.org
如上截图则代表安装成功,可以再当前窗口中输入:cnpm –v,没有报错则代表安装成功。
3.VUE脚手架
vue-cli是vue的命令行工具,只要按照官网敲几行命令就可以新建一个基本的vue项目框架。方便快捷。
在命令行输入:cnpm install --global vue-cli
4.根据模板创建项目
在我的电脑任意位置新建一个文件夹(speed),D:\soft\space\speed,名字自己定义。
命令行输入:d:,进入d盘路径,然后命令行输入:cd D:\soft\space\speed,进入到d盘对应的文件夹
在命令行输入:vue init webpack,进入项目创建向导
回车,输入项目项目名称speed,剩余的如果不想填写,直接一路回车下去,直到进入创建页面,根据实际情况可能需要几分钟。
本地对应路径项目文件夹下自动创建了项目文件目录并自动创建了基本配置。
安装依赖,cmd命令行输入:cnpm install
5.启动和运行项目
在命令行输入:cnpm run dev
http://localhost:8080,浏览器访问
则代表项目搭建成功。