美文网首页
vue入坑全记录(1)----vue-cli脚手架搭建

vue入坑全记录(1)----vue-cli脚手架搭建

作者: lucky婧 | 来源:发表于2017-11-29 18:04 被阅读0次

一、环境搭建
1.安装node.js,安装完成后打开命令行工具(win+r输入cmd,)输入 node -v,如下图,如果出现相应的版本号,则说明安装成功,npm版本至少在3.x.x以上。


2,安装webpack,打开命令行工具输入:npm install webpack -g。安装完成之后输入 webpack -v,如下图,如果出现相应的版本号,则说明安装成功。


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



二、使用vue-cli构建项目

  1. 创建一个总文件夹放项目。如果已经安装了git,在刚建文件夹下右键选择Git Bash Here直接打开;或者在命令行工具中使用“cd 目录名称”找到该文件夹。

  2. vue脚手架搭建。输入:vue init webpack project;(“project” 项目名称,不能使用中文)。

     $ vue init webpack project  --------------------- 安装vue脚手架的命令
     ? Project name (project)    ---------------------项目名称
     ? Project name project
     ? Project description (a Vue.js project)  ---------------------项目描述
     ? Project description a Vue.js project
     ? Author Wjessie   --------------------- 项目创建者
     ? Author Wjessie   
     ? Vue build (Use arrow keys)
     ? Vue build standalone
     ? Install vue-router? (Y/n)  --------------------- 是否安装Vue路由
     ? Install vue-router? no
     ? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则
     ? Use ESLint to lint your code? No
     ? Setup unit tests with Karma + Mocha? (Y/n)
     ? Setup unit tests with Karma + Mocha? Yes
     ? Setup e2e tests with Nightwatch? (Y/n)
     ? Setup e2e tests with Nightwatch? Yes
     vue-cli · Generated "exprice".
    To get started:  --------------------- 说明如何启动这个服务
     cd exprice
     npm install
     npm run dev

如下图:


  1. 进入创建的项目目录:cd project(项目名称);
    项目目录如下:
  1. 安装项目依赖:npm install;会有点慢,耐心等候哦!安装完目录会多一个node_modules文件夹。


简单介绍各个文件:

  1. 启动项目,输入:npm run dev。服务启动成功后在浏览器中输入:localhost:8080会出现一个欢迎页面, 默认8080端口,确认自己的8080端口未被使用。

至此,vue脚手架搭建完成。

相关文章

  • 脚手架安装

    Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli) 2017.03.01 10:34*字数...

  • vue搭建笔记

    如何搭建安装vue环境? 请看教程 Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli) w...

  • vue-cli单页面应用

    vue-cli是vue搭建环境脚手架,只需要几个命令就可以搭建开发环境。 vue-cli脚手架搭建 1.安装nod...

  • Vue.js重构有赞商城-配置

    1. 搭建脚手架 Vue-cli官方教程Vue.js安装教程 yarn global add vue-cli脚手架...

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

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

  • VUE2.0使用自己封装的插件

    入坑vue,步步为坑,记个笔记。 自己封装了个插件,想在vue-cli搭建的脚手架中使用,搞了半天引用不了。查阅文...

  • webpack进阶【17】: vue-cli 脚手架环境搭建

    webpack: vue-cli 脚手架环境搭建 一、搭建 vue-cli 脚手架环境 1、在一个新的文件夹下面,...

  • vue入坑全记录(1)----vue-cli脚手架搭建

    一、环境搭建1.安装node.js,安装完成后打开命令行工具(win+r输入cmd,)输入 node -v,如下图...

  • vue架构搭建

    框架搭建步骤 1、 Vue-cli脚手架安装 npm install -g vue-cli 2、 创建工程 ...

  • vue的脚手架Vue-cli

    1、什么是Vue-cli ? vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建的脚手架,它可以轻...

网友评论

      本文标题:vue入坑全记录(1)----vue-cli脚手架搭建

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