vue的搭建(使用vue的脚手架vue-cli)

先说说前言,因为最近在看技术,vue还是很火的,至少现在做vue的公司很多,相比于angular我觉得vue更适合上手,所以我今天就讲讲怎么搭建vue的项目文件,当然这个也是我自己搭过一遍的,也走了一下接口,获取到了数据。这篇先将怎么用脚手架搭建项目说一下,后面再说例子。

说明:此文章参考了网上一些大神的技术分享,自己结合总结一下。此文章是基于webpack构建的vue项目

一.首先搭建环境,使用nodejs自带的包管理工具安装

1.安装node.js,从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。
这里写图片描述

注意的是npm的版本最好是3.x.x以上,以免对后续产生影响,升级可以敲入命令cnpm install npm -g(至于cnpm是什么,我下面会说到)

2.由于 npm 安装速度慢,需要使用淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像。(打开命令行,敲入npm install -g cnpm –registry=https://registry.npm.taobao.org

安装完成后,查看版本出现版本号,就说明安装成功了
这里写图片描述

3.安装webpack,打开命令行工具输入:cnpm install webpack -g,安装完成后记得要安装webpack-cli,自行安装,打开命令行输入:cnpm install webpack-cli -g,(至于为什么要自行安装,是因为我根据它提示安装的时候老报错,自己全局安装后就好了),安装完成之后输入 webpack -v,如下图,如果出现相应的版本号,则说明安装成功。
这里写图片描述

4.安装vue-cli脚手架构建工具,打开命令行工具输入:cnpm install vue-cli -g,安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。
这里写图片描述

二、通过以上四步,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目

1.在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录:①cd 目录路径 ②如果以安装git的,在相关目录右键选择Git Bash Here
2.这里我新建了一个文件夹叫vue-demo,我们用命令打开D盘找到这个文件然后安装vue,如下图所示:
这里写图片描述
3.全局安装vue的脚手架vue-cli,打开命令行,在该文件夹下输入:cnpm install –global vue-cli,如下图:
这里写图片描述
4.创建一个基于 webpack 模板的新项目,打开命令输入:vue init webpack my-project
这里写图片描述

创建好的项目包如下图所示:
这里写图片描述

这里写图片描述

5.启动项目,输入:cnpm run dev。服务启动成功后浏览器会默认打开一个“欢迎页面”,如下图:
这里写图片描述
这里写图片描述

注意:这里是默认服务启动的是本地的8080端口,所以请确保你的8080端口不被别的程序所占用。
修改端口号如下图:
这里写图片描述

至此简单的一个项目构建完毕….后面我将继续利用这个构建的项目写一个简单的单页面应用。

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页