手把手教你搭建一个vue项目的完整步骤

目录
  • 一、环境准备
    • 1、安装node.js
    • 2、检查node.js版本
    • 3、为了提高我们的效率，可以使用淘宝的镜像源
  • 二、搭建vue环境
    • 1、全局安装vue-cli
  • 三、创建vue项目
    • 1、用cmd命令创建项目
      • 1.1创建文件
      • 1.2选择配置信息
      • 1.3选择版本
      • 1.4路径模式选择
      • 1.5语法代码格式检查
      • 1.6第三方文件存在的方式
      • 1.7是否保存本次配置信息（保存预设）
      • 1.8创建成功
      • 1.9运行
      • 1.10启动
      • 1.11停止服务
    • 2、用vue资源管理器创建
      • 2.1进入vue资源管理器界面（vue ui界面）
      • 2.2创建文件
      • 2.3配置信息
      • 2.4配置预设
      • 2.5启动运行项目
  • 四、Vue-cli工程中每个文件夹和文件的用处
  • 总结

一、环境准备

1、安装node.js

下载地址：https://nodejs.org/zh-cn/

界面展示

2、检查node.js版本

查看版本的两种方式

  • 1|node -v
  • 2|node -version

出现版本号则说明安装成功（最新的以官网为准）

3、为了提高我们的效率，可以使用淘宝的镜像源

  • 输入：npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安装npm镜像源
  • 以后再用到npm的地方直接用cnpm来代替就好了，因为没有镜像源的话，安装速度比较慢

检查是否安装成功：cnpm -v

二、搭建vue环境

1、全局安装vue-cli

这里注意：安装vue-cli对node.js的版本是有要求的

装的两种方式：输入cmd命令

  • 1|npm install -g @vue/cli //这个是从国外下载的比较慢
  • 2|cnpm install -g @vue/cli //这个是从镜像源下载

查看安装的版本（显示版本号说明安装成功）

  • 1|vue --version

如果你原来有版本或者版本比较低，可以升级

  • 1|npm update -g @vue/cli
  • 2|yarn global upgrade --latest @vue/cli

三、创建vue项目

1、用cmd命令创建项目

1.1创建文件

以管理员身份打开命令行界面，进入任意一个想要创建项目的文件夹

输入：vue create vue01

1.2选择配置信息

通过上下方向键选择对应配置，然后回车

按空格键选择要安装的配置资源，带 * 号说明被选上了

1.3选择版本

上下方向键选择版本，这里我们选择vue2，然后回车

1.4路径模式选择

这里可以不用管，直接输入 no/n

1.5语法代码格式检查

代码检查，选标准的就行，方向键切换，空格键选择然后回车

代码检查时间，方向键切换，空格键选择然后回车

1.6第三方文件存在的方式

1.独立的文件 2.综合的

1.7是否保存本次配置信息（保存预设）

这里如果选择保存的话，就要输入名字，默认就是文件夹的名字，下次配置的时候就会显示这个文件配置的选项就像上面的一样，在配置的时候会多出来一个

1.8创建成功

Successfully created project vue01出现这个说明创建成功

1.9运行

cd到项目文件夹下面

cd vue01

输入代码运行文件
npm run serve

1.10启动

在浏览器输入对应的网址就可以看到界面啦
http://localhost:8080/

1.11停止服务

两下Ctrl+C 或者Ctrl+C一下然后Y

2、用vue资源管理器创建

2.1进入vue资源管理器界面（vue ui界面）

cmd命令，因为是全局的，所以在哪里打开都行，注意：运行的时候不能关闭cmd窗口，不然就停止服务了，如果电脑太卡，可以直接在浏览器输入：http://localhost:8000/
vue ui

2.2创建文件

这里直接create 创建文件

2.3配置信息

和用cmd命令差不多，填完之后下一步

2.4配置预设

选择预设，或者自定义，然后下一步完成创建

2.5启动运行项目

按步骤来：任务>serve>运行>启动

四、Vue-cli工程中每个文件夹和文件的用处

  • dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署
  • node_modules：存放npm命令下载的开发环境和生产环境的依赖包
  • public：有的叫assets：存放项目中需要用到的资源文件，css、js、images以及index
  • src文件夹：存放项目源码及需要引用的资源文件
  • src-api文件夹：放ajax相关操作的代码文件:index.js(相关的接口),ajax.js(封装的axios,拦截器)。有的叫service：自己配置的vue请求后台接口方法
  • src-common文件夹：stylus的混合文件.styl，不要写到public也可以
  • src-components文件夹：存放vue开发中抽离的一些公共组件
  • src-mock文件夹：mock数据存放文件及mock模拟接口（没有后台接口或接口不完整情况下可以模拟后台接口）
  • src-pages文件夹：涉及到路由的组件
  • src-router文件夹:vue-router，路由器及路由的配置
  • src-store文件夹：存放 vue中的状态数据，用vuex集中管理
  • App.vue文件：使用标签渲染整个工程的.vue组件
  • main.js文件：vue-cli工程的入口文件
  • package.json文件：用于 node_modules资源部 和 启动、打包项目的 npm 命令管理
  • build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库
  • config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同，常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等

总结

到此这篇关于手把手教你搭建一个vue项目的完整步骤的文章就介绍到这了,更多相关搭建vue项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 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-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.

  • webpack搭建vue 项目的步骤

    webpack搭建vue 项目的步骤

    前期准备 webpack vue.js npm nodejs ES6语法 由于本文内容是通过npm来加载vue,所以开始之前需安装nodejs环境,安装完成之后再执行以下步骤: 创建项目 mkdir vue-demo cd vue-demo 使用 npm init 命令 生成package.json文件 npm init 大概生成的package.json 如下: { "name": "vue-demo", "version": "1.

  • Vue项目环境搭建详细总结

    Vue项目环境搭建详细总结

    关于Vue安装的详细步骤总结 安装NodeJs 首先解释一下什么是nodejs,为什么要安装node?node的优点? node.js是一个运行在chromeJavascript运行环境下(俗称GoogleV8引擎)的开发平台,用来方便快捷的创建服务器端网络应用程序,也可以把它理解为一个轻量级的JSP或PHP环境,如果用来开发Web应用的话,有时要便捷很多. node.js的最大优点是处理并行访问,如果一个web应用程序同时会有很多访问连接,就能体现使用node.js的优势. 另一个好处是,使用

  • vue-cli3搭建项目的详细步骤

    中文文档 https://github.com/vuejs/vue-docs-zh-cn 在安装之前请装好nodeJs 安装vue cli3 1. 检测vue 的版本 vue -V (V大写) or vue --version 2. 安装@vue/cli npm install -g @vue/cli (ps: vue cli2的安装方法 npm install -g vue-cli ) 安装全局桥插件,能兼容使用vue cli2 npm install -g @vue/cli-init cmd

  • VSCode搭建Vue项目的方法

    在vscode上搭建一个vue项目---初学总结. 1.假设Vscode.nodejs等已经安装好了. 2.全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目. 安装命令: npm install -g vue-cli 打开VScode的终端,调出命令输入框.点击终端-新建终端,输入上述命令,回车,等待安装完成. 3.安装webpack,它是打包js的工具 安装命令: npm install -g webpack 安装方法同上. 4.安装完成之后就可以开始创建vue项目,首先创

  • vue3.0 项目搭建和使用流程

    vue3.0 项目搭建和使用流程

    最近在重构一个老项目,领导要求使用新的技术栈.好吧,是时候秀一波我新学的vue3.0了. 不多bb,开始我的表演...(以下只是我自己个人的理解和使用习惯,仅供参考哦) 一:项目搭建 1. 可以自己配置vite,但是为了节省时间,我就使用脚手架直接搭建.(有兴趣可以研究一下vite,还是很香的) 2. 项目生成:iTerm下: vue create myproject 之后根据自己的要求选择不同的配置 选择我们需要的3.x 之后按照要求配置一下router,已经pack.json ... 然后n

  • 详解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项目的完整步骤

    手把手教你搭建一个vue项目的完整步骤

    目录 一.环境准备 1.安装node.js 2.检查node.js版本 3.为了提高我们的效率,可以使用淘宝的镜像源 二.搭建vue环境 1.全局安装vue-cli 三.创建vue项目 1.用cmd命令创建项目 1.1创建文件 1.2选择配置信息 1.3选择版本 1.4路径模式选择 1.5语法代码格式检查 1.6第三方文件存在的方式 1.7是否保存本次配置信息(保存预设) 1.8创建成功 1.9运行 1.10启动 1.11停止服务 2.用vue资源管理器创建 2.1进入vue资源管理器界面(vu

  • 手把手教你搭建vue3.0项目架构

    手把手教你搭建vue3.0项目架构

    前言: GitHub上我开源了vue-cli.vue-cli3两个库,文章末尾会附上GitHub仓库地址.这次把2.0的重新写了一遍,优化了一下.然后按照2.0的功能和代码,按照vue3.0的语法,完全重写了一遍.虽然名字叫cli,其实两个库都是基于vue-cli创建的.做这个的目的是为了工作中快速启动项目,毕竟切片打包.less.axios.vuex.router.UI框架.基础文件目录.权限,这些都是基操,当然项目不同,还是要做些调整的.这两个项目的master分支都是最基础的东西,里面还包

  • 手把手教你写一个vue全局注册的Toast的实现

    手把手教你写一个vue全局注册的Toast的实现

    目录 前言: 我们先思考下面的问题: 首先: 然后: 后来: 再且: 前言: 前几天客户经理不让我用某饿了么之类的UI库做一个轻提示之类的组件,当时一想我是饿了么战士,怎么会写哪个东西,然后我就想着用个alert糊弄过去,但是不行,然后我就细琢磨,发现Vue有个非常不错的Vue.extend. 经过一番努力,我学会了,可能是以前学的时候马虎漏掉了.不过问题不大,还能肝. 我们先思考下面的问题: 在写vue项目的时候啊,我们有了初始化的根实例之后,页面之间都是通过router进行管理,组件也是通过

  • 带你一步步从零搭建一个Vue项目

    带你一步步从零搭建一个Vue项目

    目录 一.项目创建 1.打开命令行窗口Cd /d进入想要创建项目的位置,输入vue create 项目名 2.选择Vue2 3.运行该项目 4.创建成功 二.路由的配置 1.安装路由(vue2 只能安装3版本的vue-router) 2.配置路由 三.API接口配置 1.安装axios 2.axios的二次封装 3.跨域问题 四.Vuex 总结 一.项目创建 1.打开命令行窗口Cd /d进入想要创建项目的位置,输入vue create 项目名 2.选择Vue2 3.运行该项目 4.创建成功 在浏

  • 使用webpack5从0到1搭建一个react项目的实现步骤

    使用webpack5从0到1搭建一个react项目的实现步骤

    前言 在这之前,每开始一个新项目我都是使用现有的脚手架,这非常便于快速地启动一个新项目,而且通用的脚手架通常考虑地更加全面,也有利于项目的稳定开发:不过对于一个小项目,根据需求自己搭建可能会更好,一方面小项目不需要脚手架那么丰富的功能,另一方面可以提高对项目的掌控度以方便后期的扩展. 这篇文章是在实践中总结的,具有实操性,读者可跟着一步步进行搭建,中间我会穿插一些原理,当然因为笔者的能力有限,不会特别深入. 预备知识 熟悉Javascript && HTML && CSS

  • VSCode创建Vue项目的完整步骤教程

    VSCode创建Vue项目的完整步骤教程

    目录 一.配置环境 1.安装VS Code 2.安装node.js 3.安装配置脚手架vue-cli 二.创建vue项目 1.命令方式创建 2.重新初始化依赖 3.启动项目 补充:在VScode中如何使用vue代码 总结 一.配置环境 1.安装VS Code 官网下载 https://code.visualstudio.com/ 下载VS Code,按照步骤安装. 2.安装node.js (1)官网 https://nodejs.org/en/ 下载node.js,按照步骤安装即可,node.j

  • ubuntu中利用nginx部署vue项目的完整步骤

    ubuntu中利用nginx部署vue项目的完整步骤

    目录 1.安装nginx 2.打包上传vue项目到服务器 配置nginx 访问vue项目 常见错误 总结 1.安装nginx 更新源列表 apt-get update 安装nginx apt-get install nginx 检查nginx是否安装,输入如下命令后若出现版本号则安装成功 nginx -v 启动nginx server nginx restart 在浏览器输入ip地址,若出现如下页面则启动成功 2. 打包上传vue项目到服务器 打包 我的项目使用的是vs code,在终端输入如下

  • 手把手教你如何在vue项目中使用rem布局

    目录 如何在vue项目中使用rem布局 方法一:使用lib-flexible 1. 安装包 2. 引入文件 3. 根据需要设置rem 4.使用rem 方法二:使用postcss-pxtorem 1. 安装包 2. 创建rem.js文件 3. 新建 .postcssrc.js 4. 在main.js中引入 5. 设置body的font-size 6. 可参照流程图 总结 如何在vue项目中使用rem布局 场景: 在我们开发移动端项目中,实现手机页面布局,需要使用rem布局,那么该如何使用呢? 本文

  • nginx通过https部署vue项目的完整步骤

    目录 一.生成证书 进入nginx安装目录 创建ssl文件目录 生成server.key,需要设置两次密码 生成无密码的server.key 创建服务器证书的申请文件 server.csr 生成crt证书文件server.crt 二.nginx配置 三.修改vue配置文件 总结 本篇主要记录vue项目,通过nginx实现https部署的免费方案.主要参考步骤和关键点如下所示. 一.生成证书 进入nginx安装目录 # 进入nginx目录 [root@hecs-402944 nginx]# cd

  • 手把手教你搭建第一个Spring Batch项目的步骤

    一.概述 Spring Batch是一个轻量级,全面的批处理框架. 一个典型的批处理过程可能是: 从数据库,文件或队列中读取大量记录. 以某种方式处理数据. 以修改之后的形式写回数据 Spring Batch 应用架构图: 一个Batch(批处理)过程由一个Job(作业)组成.这个实体封装了整个批处理过程. 一个Job(作业)可以由一个或多个Step(步骤)组成.在大多数情况下,一个步骤将读取数据(通过ItemReader),处理数据(使用ItemProcessor),然后写入数据(通过Item

随机推荐