美文网首页
vue搭建项目的步骤及详解

vue搭建项目的步骤及详解

作者: 前端的爬行之旅 | 来源:发表于2018-10-24 16:29 被阅读28次

1.项目环境的搭建

安装nodejs

官网下载nodejs
官方网站:https://nodejs.org/en/
Node.js自带npm包管理工具,使用npm可使我们快速安装项目中所需要的组件。
终端中输入如下命令行,检查node的版本

node --version

当前版本号是v10.2.0,如果没有出现版本号可能是没有安装node成功。


image.png

安装vue-cli脚手架工具

命令行中输入

npm install -g vue-cli

进行vue-cli全局的安装


image.png

输入

vue --version

查看当前安装的vue的版本号。

image.png
另外,由于npm的官方镜像服务器是在国外,国内没有进行科学上网的同学安装依赖包时,有时候速度会非常慢。因此,可采用淘宝的npm镜像,在命令行工具输入:
npm install -g cnpm --registry=https://registry.npm.taobao.org

以后就可以使用cnpm来代替npm了。因此,如果已经安装了淘宝的npm镜像工具,vue-cli可以这样安装:

cnpm install -g vue-cli

此时,项目环境的配置已经基本完成了。

2.项目的搭建

基于webpack模板搭建vue项目
命令行输入

vue init webpack my-project

其中my-project为项目名称,根据自己项目自定义名称。
输入并回车后,待下载完模版,会进入一系列的配置问题,详细如下图:

  • Project name:项目名称
  • Project description:项目描述
  • Author:作者
  • Vue build:运行时与编译
  • Install vue-router?:是否安装路由?
  • Use ESLint to lint your code?:是否进行代码检测?
  • Setup unit tests with Karma + Mocha?:是否进行单元测试?
  • Setup e2e tests with Nightwatch?:是否进行端对端测试?

配置完成后我们会在自己的项目目录看到我们的项目文件my-project,我们可以将终端定位到当前项目,并在命令行输入下面的命令行,项目启动成功。

my-project
npm run dev
image.png

在浏览器中输入localhost:8080则可以访问项目。

  • 推荐: 安装Vue.js devtools扩展程序

打开Chrome网上应用店,安装Vue.js devtools。这个插件,便于我们在进行Vue.js开发过程中的调试,是一个很有用的工具。

相关文章

网友评论

      本文标题:vue搭建项目的步骤及详解

      本文链接:https://www.haomeiwen.com/subject/pnqjuftx.html