基于Vue-cli快速搭建项目的完整步骤

前言

vue-cli 是一个官方发布 vue.js 项目脚手架，Vue-cli可以快速帮助我们创建一个项目，这是官方给我们提供的脚手架。下面我说一下vue-cli的使用方法。

下面话不多说了，来一起看看详细的介绍吧

一、准备工作

在使用vue-cli时，首先需要安装nodejs，npm，其次需全局安装vue和vue-cli

　　1、nodejs和npm安装方法详见：https://www.jb51.net/article/90518.htm

　　2、npm install -g vue

　　3、npm install -g vue-cli

二、vue-cli快速搭建项目

安装完成后，同时在C:\Users\Andminster\AppData\Roaming\npm目录下为会生成几个文件。

三、配置环境变量

Vue不是内部或外部命令问题解决

表示系统没有找到vue.cmd的地址，需要将vue.cmd的地址添加到系统环境变量的path中。

可以全局搜索，vue.cmd

右键选择“打开文件所在目录”，将该目录添加至系统环境变量path中：

电脑——属性——高级系统设置

四、安装完成后，创建自己的工作空间

在cmd切换至刚刚创建好的工作空间，如果已经有工作空间，直接切换到工作空间即可。

使用命令创建项目

　　vue init webpack test

test是项目名称，这个名字自己随便取。

命令输入后，会进入安装阶段，需要用户输入一些信息

　　1、Project name (vuetest) 项目名称，可以自己指定，也可直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）。

　　2、Project description (A Vue.js project) 项目描述，也可直接点击回车，使用默认名字

接下来会让用户选择

　　3、接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，因为我选择了使用ESLint

　　4、Standard (https://github.com/feross/standard) 标准

　　5、AirBNB (https://github.com/airbnb/javascript) JavaScript最合理的方法，这个github地址说的是JavaScript最合理的方法

　　6、none (configure it yourself) 这个不用说，自己定义风格

　　具体选择哪个因人而异吧 ，我选择标准风格

　　7、Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，我选择安装

　　8、Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ，我选择安装

　　9、完成

五、运行项目

在项目文件夹下执行npm install（安装依赖包），npm run dev（运行项目）。

在运行项目中如果遇到端口被占用，找到bulid文件夹下的webpack-dev-server.js修改port即可。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 使用Vue-cli 3.0搭建Vue项目的方法

    使用Vue-cli 3.0搭建Vue项目的方法

    1. 环境准备 1.1. 安装Node.js (建议使用LTS版本) 1.2. nrm安装及npm registry设置 // use npm npm i nrm -g // use yarn yarn global add nrm 查看可用的npm源 nrm ls nrm查看npm源.png 切换npm源(以使用taobao为例) // 用法: nrm use *** nrm use taobao // 切换之后可用 nrm ls查看是否已经切换了npm源 nrm切换npm源.png 1.3.

  • vue.js的手脚架vue-cli项目搭建的步骤

    vue.js的手脚架vue-cli项目搭建的步骤

    手脚架是什么? 众所周知,现在的前端项目发展得越渐越大,我们前端程序员要从0开始去搭建一套完整的项目很费时,所以这时候前端工程的手脚架就出现了. 我用得vue-cli也是其中之一,还有其他的我也说不清,我就说一下我接触比较多的这款vue-cli, 但是所有手脚架的核心:都是为了能够快速搭建一个完整的项目的结构,开发者只需要在生成的项目结构的基础上进行开发即可,非常简单高效. 然后, vue-cli 的脚手架项目模板有browserify 和 webpack ,vue-lic这个手脚架是把预定义的

  • 详解如何使用vue-cli脚手架搭建Vue.js项目

    详解如何使用vue-cli脚手架搭建Vue.js项目

    1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admin $ cd vue-admin $ npm install $ npm run dev 后面分步说明. 2. 安装 前提条件,Node.js >=4.x版本,建议使用6.x版本.npm版本 > 3.x 全局安装vue-cli $ npm install -g vue-cli 3. 使用 $ vue init

  • 详解Vue使用 vue-cli 搭建项目

    详解Vue使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli  一. 安装 node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包. 安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功.  二.安装 vue-cli 安装好了 node,我们可以直接全局安装 vue-

  • 基于vue-cli vue-router搭建底部导航栏移动前端项目

    vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述,主要参考 Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 2.项目呈现效果 项目呈现网址:www.zhoupeng520.cn/index.html 项目中主要用了Flex布局,以及viewport相关知识,已达到适应各终端屏幕的目的 3.项目主要目录 4主要代码如下  (1)App.vue <template> <div id="app"> <router-view c

  • 详解vue-cli项目中用json-sever搭建mock服务器

    详解vue-cli项目中用json-sever搭建mock服务器

    vue-cli下配置json-server 使用json-server实现后台数据接口 先建一个json文件:db.json 放在build/下 在build/dev-server.js中配置 (注意变量命名) github说明: 启动项目 地址栏输入 localhost:8081 服务已启动成功 8081后加相应后缀即可访问数据 localhost:8081/posts l localhost:8081/comments 最后做一下浏览器代理 设置config/index.jsr如下 最后验证

  • vue2.0实战之使用vue-cli搭建项目（2）

    vue2.0实战之使用vue-cli搭建项目（2）

    Vue-cli是官方推荐的快速构建单页应用的脚手架.官方给的建议,如果你是初次尝试Vue,哪就老老实实用普通的书写引入js文件,这里牵扯太多的东西,例如webpack.npm.nodejs等等,很容易成就从入门到放弃的思想.这篇文章本身就是按照官方的文档中的构建流程来的(官方构建建议).一下是构建过程. 一. 安装 node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包. 安装完成后,可以命令行工具中输入node -v和npm -v,如果能显示出

  • 深入理解Vue-cli搭建项目后的目录结构探秘

    我最近也在研究Vue-cli的路上,今天了解一下Vue-cli目录结构,那么今天也算个学习笔记吧! 一.前言 这里先说一下使用vue-cli之前的事情. 由于刚刚接触Vue不久,就接到了一个移动端项目,于是打算使用vue来进行一次尝试,所以按照练习时候的样子,emmm先把vue.js引入网页里来,emmm自己的外联main.css样式引进来,还有自己的main.js文件,还有一些图片布拉布拉的,所以我整个项目的结构如下:(捂脸) ├── css ├── images ├── index.html

  • 详解用vue-cli来搭建vue项目和webpack

    vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-simple projectName 第三步:把文件切换到初始化的项目中 cd projectName 第四步:安装依赖 npm install 当然也可以用淘宝镜像cnpm来安装,这样快很多 cnpm install 第五步:运行 npm run dev 完成一个初始化vue项目 webpack 要开

  • 用Vue-cli搭建的项目中引入css报错的原因分析

    用Vue-cli搭建的项目中引入css报错的原因分析

    我最近在研究Vue的路上,今天遇到了个问题,在vue cli 引入css报错,后来查询了很多资料,那么今天也算个学习笔记吧! 1.问题描述 之前用vue-cli搭建的项目,在main.js中引入elementUI库中的css,或者在其他文件中(比如App.vue)引入自己的css文件(假如你的文件是在src目录下),都会报一个相同的错.下如图 经过一番折腾之后发现需要在build文件下的webpack.base.conf.js中加上下面的代码即可 { test: /\.css$/, includ

随机推荐