基于脚手架创建Vue项目实现步骤详解

第一步 准备工作

1.下载安装Node.js

验证是否安装的方法，在命令行输入node -v

2.安装Vue

在命令行输入npm install -g @vue/cli

查看Vue版本号 npm vue --version

如果Vue版本太低，先卸载Vue低版本 npm uninstall vue-cli -g

第二步 创建Vue项目

1. 打开要创建路径

2-1.vue CLI3版本输入vue create test创建名为test的项目

　接下来会问你一系列的问题

　　Please pick a preset:(Use arrow keys)//选择使用什么样的工具，两个选项：

　　　　1.default (babel,eslint)　　//默认

　　　　2.Manually select features　　//自定义，按空格选中

　　Where do you prefer placing config for Babel, PostCSS，ESLint,etc.?(Use arrow keys)　　//每一个配置都生成一个配置文件还是都生成在package.json中

　　　　1.In dedicated config files　　//在专用的配置文件

　　　　2.In package.json　　//在package.json

　　Save this as a preset for future projects?(y/n)　　//保存刚刚选择的配置

　　　　1.y

　　　　　　Save preset as:　　//保存配置的名字

　　　　2.n

　　等待安装……

　　安装完成后，输入cdtest进入项目文件夹中

　　npm run serve启动项目

2-2.vue CLI2版本输入vue init webpack demo //项目是基于webpack的 项目名demo

　接下来会有如下提示

　　Project name（工程名）:回车
　　Project description（工程介绍）：回车
　　Author：输入作者名
　　Vue build（是否安装编译器）:回车
　　Install vue-router（是否安装Vue路由）：回车
　　Use ESLint to lint your code（是否使用ESLint检查js代码）：n
　　Set up unit tests（安装单元测试工具）：n
　　Setup e2e tests with Nightwatch（是否安装端到端测试工具）：n
　　Should we runnpm installfor you after the project has been created? (recommended)：回车。

第三步 启动项目

  • 进入项目目录：cd demo
  • 安装项目所需要的依赖：npm install
  • 启动项目：npm run dev

启动成功，浏览器打开：localhost:8080，即可看到vue项目。

目录结构

package.json

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用vue-cli（vue脚手架）快速搭建项目的方法

    使用vue-cli（vue脚手架）快速搭建项目的方法

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目.这篇文章将会从实操的角度,介绍整个搭建的过程. 1. 避坑前言 其实这次使用vue-cli的过程并不顺利,反复尝试几次都遇到以下这个报错: 创建vue-cli工程项目时的报错 在网上查了很多资料才发现原来是node版本过低的问题,虽然没有找到官方对这个"过低"问题的解释,但是根据国外网友的经验之谈,应该是至少使用node6,我将node4更新至node8之后确实没有报错了,顺利搭

  • 使用webpack搭建vue项目实现脚手架功能

    本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思维在调试的时候显得尤为重要,拥有良好的编程习惯和思维能力可以大幅度提高调试效率.而编程思维的培养往往需要经验的积累,只有把底层原理一遍遍地思考之后,才会有更深入的理解,这也是vue官方文档中不建议vue初学者直接使用vue-cli的原因之一. 所以今天特意一步步通过webpack配置,实现与vue-

  • 使用vue-cli脚手架工具搭建vue-webpack项目

    最近更新了webpack配置详解,可移步vue-cli webpack详解 对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一系列的工具,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等.对于一个需要长期维护和大型的项目而言,这些工具是必不可少的,但是尝试配置初始化这些很痛苦.这就是我们发布vue官方提供的脚手架工具的原因,一个简单的构建工具,通过

  • 使用vue脚手架（vue-cli）搭建一个项目详解

    1.首先得下载node.js.方法可自行百度. 2. 3.一开始报很多错误,后来用管理员就没问题了. 4. 5.如上图会遇到卡住的问题,解决方法是 在最后一个选项上选择No,I will handle it myselft,然后cd vue_test,然后cnpm install,这样就成功了,然后执行npm run dev就出现: 6.浏览器端访问localhost:8081 7.项目目录 8.图片来源于网络 以上所述是小编给大家介绍的vue脚手架(vue-cli)搭建项目详解整合,希望对大家

  • Electron-vue脚手架改造vue项目的方法

    1. 什么是Electron Electron可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用.你可以把它看作是专注于桌面应用而不是 web 服务器的,io.js 的一个变体. 这不意味着 Electron 是某个图形用户界面(GUI)库的 JavaScript 版本. 相反,Electron 使用 web 页面作为它的 GUI,所以你能把它看作成一个被 JavaScript 控制的,精简版的 Chromium 浏览器. 从开发的角度来看, Electron app

  • 详解使用vue脚手架工具搭建vue-webpack项目

    详解使用vue脚手架工具搭建vue-webpack项目

    对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一系列的工具,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等.对于一个需要长期维护和大型的项目而言,这些工具是必不可少的,但是尝试配置初始化这些很痛苦.这就是我们发布vue官方提供的脚手架工具的原因,一个简单的构建工具,通过几个默认的步骤帮助你快速的构建Vue.js项目. 1.安装node环境 可以

  • 详解vue-cli 脚手架项目-package.json

    使用vue-cli脚手架新建的项目中,含有package.json. package.json是npm的配置文件,里面设定了脚本以及项目依赖的库. npm run dev 这样的命令就写在package.json里. { "name": "vue-manage", // 项目名称 "version": "1.0.0", // 版本 "description": "Reimbursement Man

  • vue-cli3.0 脚手架搭建项目的过程详解

    1.安装vue-cli 3.0 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) 2.命令变化 vue create --help 用法:create [options] <app-name> 创建一个由 `vue-cli-service` 提供支持的新项目 选项: -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项   -d

  • 基于脚手架创建Vue项目实现步骤详解

    第一步 准备工作 1.下载安装Node.js 验证是否安装的方法,在命令行输入node -v 2.安装Vue 在命令行输入npm install -g @vue/cli 查看Vue版本号 npm vue --version 如果Vue版本太低,先卸载Vue低版本 npm uninstall vue-cli -g 第二步 创建Vue项目 1. 打开要创建路径 2-1.vue CLI3版本输入vue create test创建名为test的项目 接下来会问你一系列的问题 Please pick a

  • 使用IDEA创建java项目的步骤详解（hello word）

    使用IDEA创建java项目的步骤详解（hello word）

    前提:已安装好jdk,配置好环境变量.我使用的是java 8 首先在自己的D盘下建一个文件夹,用来存放我们待会新建的项目,我创建了IdeaProject: 1,第一步打开idea 2,第二步选择创建java项目,并选择自己的jdk(我自己本地已经配置了所以有),没有可以点击new去自己的安装目录下找,一般默认安装C:\Program Files\Java,然后选择next 下一步 3,第三步将"Create project from template"前面的勾去掉,然后点击"

  • 亲手教你IDEA2020.3创建Javaweb项目的步骤详解

    亲手教你IDEA2020.3创建Javaweb项目的步骤详解

    IDEA2020.3激活码 最新idea2020激活码超详细教程(设置插件仓库成功激活到2099年) 关于最新IDEA2020.2.1,2.2,3以上破解,激活失效,重新激活的问题 创建Javaweb项目 第一步:在当前Project下创建一个Java的Module 第二步:右键当前模块选择Add Frameworks Support勾中Web Application 第三步:点击Edit Configurations,点击+号选择Tomcat Server的Local然后再选择Deployme

  • vue-cli构建vue项目的步骤详解

    构建一个 vue 项目最简单的方式就是使用脚手架工具 vue-cli .前端的三大框架都有自己的脚手架工具,其作用就是用配置好的模板迅速搭建起一个项目工程来,省去自己配置 webpack 配置文件的基本内容,大大降低了初学者构建项目的难度.这节我们看看如何使用 vue-cli 构建 vue 项目以及对构建项目的具体分析. 一.环境搭建 node 和 npm 是必不可少的,这里不再介绍. 1.安装 vue-cli $ npm install -g vue-cli 检查是否安装成功: $ vue -

  • java创建jar包并被项目引用步骤详解

    java创建jar包并被项目引用步骤详解

    目录 jar包? 1.创建项目和验证 1.1创建项目 1.2 创建包和类 1.3相应的代码 2.打包和引用包 2.1打jar包 2.2 导入生成的jar包 2.3 验证jar包导入/应用的正确性 jar包? jar包: 实现了特定功能的,java字节码文件的压缩包.本质上就是一个编译后的java项目,打包成jar文件log4j.jar , mysql-connection-8.01.jar等. 自己创建jar包,让别人来用: 1.新建java项目 2.创建实现了特定功能的类 3.将该项目生成为j

  • 使用vue cli4.x搭建vue项目的过程详解

    cli-4.x已经发布好久了,斟酌了好久,还是决定将原来的cli-2.x升级到4.x,详细的升级过程可以戳这里 1.创建项目 vue create vuetest 2.选择配置方式 ? Please pick a preset: (Use arrow keys) ☜(使用箭头键) > default (babel, eslint) ☜(使用默认的配置,会安装babel和eslint) Manually select features ☜(手动配置) 这里我选择的是手动配置(使用↑ ↓箭头切换,E

  • 基于IDEA部署Tomcat服务器的步骤详解

    基于IDEA部署Tomcat服务器的步骤详解

    简介 ​ 基于IDEA部署Tomcat服务器,并在上面创建第一个servlet程序,实现前后端交互.然后做一个简单的四则运算计算器. ​ 本程序基于2021年最新版IDEA,解决的与老版本配置不同问题 idea2021 最新 jihuo 教程(无线重制使用) 步骤一 安装Tomcat(前提已经安装好JDK) ​ 1.Tomcat是免费的服务器,直接在官网下载即可 ​ 2.压缩包下载好后直接将其解压到指定路径下 ​ 3.在安装路径下有一个bin文件夹,在里面找到startup.bat文件,双击运行

  • gitee命令行上传项目的步骤详解

    1.注册gitee账户 2.登录gitee新建个仓库,用来存放项目 3.找到需要上传的项目,右键,git bash here 这里需要先去官网下载安装git git官网 4.git init命令在当前文件夹下创建一个本地仓库 5.git remote add origin 远程仓库地址 6.对需要上传的项目添加追踪,git add .代表当前文件夹下的所有文件都添加追踪 git add "项目名" 单独给某个项目添加追踪 7.先提交到本地仓库 git commit -m "提

  • 图文讲解用vue-cli脚手架创建vue项目步骤

    用vue-cli脚手架可以快速的构建出一个前端vue框架的项目结构.今天小编我便来记录一下vue-cli脚手架的构建项目的经验. 1.首先便是要搭建好vue-cli脚手架工具才行滴.搭建vue-cli脚手架工具的方法便是如图所示这样滴. 2.然后指定一个目录并用vue init webpack+项目名称便可得到前端项目的结构了哦. 3.接着便是一路回车来确认项目所用到的一些语法和测试包即可. 4.接着便可看到依赖包已经配置成功了.可以用cd来进入项目里边并执行npm run dev即可启动刚才初

  • VUE脚手架的下载和配置步骤详解

    VUE脚手架下载 1.第一步全局安装脚手架 cnpm i @vue/cli -g 2.第二步创建项目 创建文件夹,打开文件命令窗口 vue create 自己创建的项目名 3. 有两个选项,选择第二个,也就是自己选择配置 4. 选择自己需要的配置 5. 进行下一步,选择 Y 6. 选择自己的类型 7.选择.json类型 8.此处, 选择 N 下载完成 文件夹完成下载 最后把 文件跑起来 以上所述是小编给大家介绍的VUE脚手架的下载和配置详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,

随机推荐