美文网首页
基于vue-cli脚手架生成vue项目

基于vue-cli脚手架生成vue项目

作者: MeydanZHOU | 来源:发表于2018-10-19 11:41 被阅读0次

一、环境搭建

1、安装nodejs,从node.js官网下载安装,默认一直点下一步即可,输入node -v时,安装成功,新版的nodejs已经集成了npm,通过npm -v查看,如下图所示:

2、安装淘宝镜像(cnpm)

(1)输入命令

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

(2)输入cnpm -v 命令,查看安装结果

  cnpm -v

(3)、全局安装vue-cli脚手架

(1)、npm install -g vue-cli 或 cnpm install -g vue-cli

(2)、vue -v           //安装完成,查看版本号

二、vue脚手架创建vue项目

1、通过命令vue init webpack 项目名称,注:前面一直默认回车即可,vue-router可安装选【Y】;ESlint是es6语法验证的,如果你勾选可能会出现很多红色的格式要求,博主偷懒所以选择了【N】,哈哈;unit test单元测试、e2e端对端测试,根据个人项目情况选择;后面几默认回车,最后一个选择包管理工具进行下载安装依赖,我们选择npm ,然后他会自动安装依赖。出现的cd vue-first(进入项目目录),npm install (安装项目依赖),前面已经自动安装了,所以不用手动安装了。

2、我们现在cd 到项目vue-first看一下目录结构

3.运行npm run dev即可运行,默认运行在8080端口,在浏览器输入http://localhost:8080即可打开项目页面。

相关文章

  • 三分钟教你写个Vue组件

    开发环境: 基于 vue-cli: 这是一个做vue项目的脚手架 使用脚手架工具 vue-cli 可以快速地构建项...

  • 使用vue-cli开发web的基础(一)-环境配置安装

    Vue 安装: 使用vue-cli脚手架开发项目,vue-cli是基于node.js,首先安装配置node.js ...

  • 【VUE】安装搭建项目vue-cli

    使用 vue-cli 脚手架搭建项目:vue-cli是官方发布的 vue.js 项目脚手架,快速搭建 vue 项目...

  • Vue脚手架

    一:简介Vue脚手架用于快速的生成Vue项目的基础架构安装3.x版本的脚手架 vue-cli创建项目详细[http...

  • 7.构建项目Ⅱ

    1.借助官方提供的脚手架vue-cli构建项目 全局安装vue-cli 创建一个基于webpack的项目 时间可能...

  • 模仿vue-cli,手写一个脚手架

    vue-cli 在vue的开发的过程中,经常会使用到vue-cli脚手架工具去生成一个项目。在终端运行命令vue ...

  • 10. 基于Vue+Element+nodeJs+Express

    一、创建vue单页面项目 我这里创建vue项目使用的是Vue-CLI脚手架,Vue CLI 是一个基于 Vue.j...

  • vue-cli 安装步骤

    vue 脚手架工具 vue-clinpm install vue-cli -g 通过vue-cli创建基于webp...

  • vue入门教程

    Vue-cli入门教程 vue-cli是官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目 ...

  • 九、第一个vue-cli项目

    什么是vue-cli vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板;  预先定义好的目录结...

网友评论

      本文标题:基于vue-cli脚手架生成vue项目

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