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

用vue-cli脚手架可以快速的构建出一个前端vue框架的项目结构。今天小编我便来记录一下vue-cli脚手架的构建项目的经验。

1、首先便是要搭建好vue-cli脚手架工具才行滴。搭建vue-cli脚手架工具的方法便是如图所示这样滴。

2、然后指定一个目录并用vue init webpack+项目名称便可得到前端项目的结构了哦。

3、接着便是一路回车来确认项目所用到的一些语法和测试包即可。

4、接着便可看到依赖包已经配置成功了。可以用cd来进入项目里边并执行npm run dev即可启动刚才初始化搭建的项目了。

5、接着看看bdjy这个目录里面就有了vue项目结构的一些依赖包了哦。

6、这个components就是存放vue组件的哦。而这个route则是设置vue路由的文件夹啦哦。

7、启动vue项目后便可以在自己电脑的浏览器看到bdjy这个项目的入口页面了。

赞 (0)

相关推荐

  • vue-cli如何快速构建vue项目

    vue-cli如何快速构建vue项目

    vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 1.安装vue-cli 使用npm全局安装vue-cli(前提是已经安装了nodejs,否则连npm都用不了) $ npm install -g vue-cli 2.创建自己的工作空间 $ vue init webpack vuetest 3.项目信息 命令输入后,会进入安装阶段,需要用户输入一些信息 Project name (vuetest) 项目名称,可以自己指定,也可直接回车,按照括号中默认名字(注意这里的名字

  • 详解vue-cli 构建Vue项目遇到的坑

    前言 使用Vue做管理系统和WebApp做过三四个项目了,期间遇到很多坑,再次一一列举,并给出解决方案,方便日后更方便使用,也为他人提供一些解决方案. 问题表象和解决方案 1.编译后js.css等相对路径和绝对路径. config/inde.js文件 build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirnam

  • 详解使用vue-cli脚手架初始化Vue项目下的项目结构

    vue-cli是Vue 提供的一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构建配置的项目. 使用vue-cli有以下几大优势: vue-cli是一套成熟的Vue项目架构设计,会跟着Vue版本的更迭而更新 vue-cli提供了一套本地的热加载的测试服务器 vue-cli集成了一套打包上线的方案,可使用webpack或Browserify等构建工具 安装 下面来安装

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

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

  • 详解用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 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 cli 3.0 搭建项目的图文教程

    1.3.0版本包括了默认预设配置和用户自定义设置 2.对比2.0来看3.0的目录结构更加精简了 移除了配置文件目录 (config 和 build文件夹) 移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中 在 src 文件夹中新增了 views 文件夹,用于分类视图组件和公共组件 vue-cli 3.0 搭建 1. 安装或升级 Node.js vue-cli官网对于node版本有明确要求 Vue CLI 需要 Node.js 8.9

  • node.js与vue cli脚手架的下载安装配置方法记录

    node.js与vue cli脚手架的下载安装配置方法记录

    目录 一.node.js安装以及环境配置 1.下载vue.js 2.安装node.js 3.检查node程序是否安装成功 4.更改默认路径 5.添加环境变量 5.测试安装是否成功 二.安装vue-cli脚手架 1.检查node环境是否安装好 2.更改淘宝镜像下定制的cnpm(gzip 压缩支持) 命令行工具代替默认的npm 3.开始安装vue-cli 4.生成项目 5.打包上线 总结 一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en

  • 解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

    问题截图: 解决方案: 1.打开File --> Setting 窗口 2.搜索 Webpack 3.选择如下路径 总结 以上所述是小编给大家介绍的解决Idea.WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

  • Vue cli3.0创建Vue项目的简单过程记录

    Vue cli3.0创建Vue项目的简单过程记录

    创建Vue项目 在要创建项目的文件夹下面打开Powershell窗口 输入命令 vue create 项目名称 选择第二项 回车后 选择是否使用历史路由 no 回车 选择 Less 回车 选择第三个 回车 选择第一个 回车 选择第一个 回车 是否保存模板 选择no 完成啦 完成 总结 到此这篇关于Vue cli3.0创建Vue项目的文章就介绍到这了,更多相关Vue cli3.0创建Vue项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

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

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

  • 基于脚手架创建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

  • Vue CLI 3搭建vue+vuex最全分析(推荐)

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack和 webpack-dev-server之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如:

  • 使用Angular CLI快速创建Angular项目的一些基本概念和写法小结

    Angular CLI是一个命令行界面工具,它可以创建项目.添加文件以及执行一大堆开发任务,比如测试.打包和发布,这里的快速开始就是基于这个命令. 开始项目前,你需要先安装node和npm,然后执行npm install -g @angular/cli安装Angular CLI. 一:用命令行新建一个项目 ng new newApp --skip-install cd newApp cnpm install ng serve --open 执行上面的命令就会自动新建一个Angualr项目,并启动

  • eclipse创建python项目步骤详解

    eclipse安装Python插件之后,主要是为了方便Python代码就可以再Eclipse进行代码脚本,使用Eclipse开发Python脚本,主要写代码会有提示功能,提高写代码效率,运行代码方便进行调式,错误提示更直观. 打开Eclipse,选择菜单中[file]>>new>>other 选择Python选项,然后选择project mondel 输入project name项目名称,运行IDE根据搭建环境选择版本 这里可以直接点击next,下一步 然后直接点击[是],如果是[

  • 详解基于Vue cli生成的Vue项目的webpack4升级

    前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除,新增的optimization使用简单 在未来,CSS.HTMl和文件都会成为原生模块 [0配置] webpack4 设置了默认值,以便无配置启动项目 entry 默认值是 ./src/ output.path 默认值是 ./dist mode 默认值是 production [模块类型] web

随机推荐