vue环境搭建vue-cli,vue-router,webpack

最新推荐文章于 2021-04-16 16:46:10 发布
原创 最新推荐文章于 2021-04-16 16:46:10 发布 · 518 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue-cli #vue脚手架 #vue环境搭建 #vue-router #webpack

本文详细介绍使用Vue-CLI脚手架创建Vue项目的全过程，包括安装Node.js环境、全局安装Vue-CLI、初始化项目模板及依赖安装等关键步骤，并解决npm版本问题。

1.新建一个项目存放文件夹

2.打开cmd进到项目文件夹

3.输入node -v  前提你装了node

4.输入npm install -g vue-cli

5.输入vue

6.输入vue list

7.输入vue init webpack sell（项目名）

8.输入npm install 

9.输入npm run dev

10.问题

提示npm版本不是3.0

解决办法  ：输入  npm install -g npm

11.输入 npm run dev


vue(vue-cli+vue-router)+babel+webpack项目搭建入门（一）开发环境搭建
大菜鸟的博客
03-17 4126
vue(vue-cli+vue-router)+babel+webpack项目搭建入门<一> 本系列文章将介绍基于vue+webpack的前端项目的构建过程。文章分为四章内容，第一章介绍开发环境的部署，第二章介绍项目的构建，第三章以一个登陆-主界面的纯前端为示例进行实战开发，第四章介绍项目打包部署以及部署上线时可能遇到的问题。本系列文章主要介绍项目构建的流程，旨在为不了解现代前端项目开...
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 9587
未完
vue 学习 02 —— vue-cli项目、Webpack、vue-router
zcy的博客
04-16 403
系列文章 vue 学习 01 —— 基本语法 vue 学习 02 —— vue-cli项目、Webpack、vue-router vue 学习 03 —— ElementUI 文章目录系列文章四、第一个vue-cli项目五、Webpack六、vue-router路由 四、第一个vue-cli项目 什么是vue-cli vue-cli是官方提供的一个脚手架，是一个人用于快速生成vue的项目模板； 使用预先定义好的目录结构和基础代码，就像我们在创建Maven项目时可以选择创建一个骨架项目。 主要功能： 统一的
vue+vuecli+webpack+vuerouter 使用history模式搭建项目 开发没问题 打包后报错问题总结
wade1010的专栏
05-19 1226
版本 vue2.5+vuecli+webpack3.6 问题背景 router的mode模式使用了history,开发环境没有任何问题，打包后出现了2个问题 问题1：路由路径实际不存在的情况，进入就出现404或者第一次进入没问题，刷新页面404 参考了官方文档，发现需要后端配合 HTML5 History 模式 我在服务器项目的根目录添加了 .htaccess 文件，粘贴了官方文档的内容，...
Vue2+VueRouter2+webpack+vue-cil构建完整项目实例（附:详细步骤截图）
weixin_34112208的博客
03-03 193
一、用vue-cil来构建一个项目，先把基本项目跑起来1、新建文件夹目录： 2、打开vueProject文件夹按住shift键右击选择在此处打开命令窗口（cmd） 3、检测nodejs和npm本版，确认已经安装node环境和npm包管理工具（下载地址：http://nodejs.cn/；）； 4、首先，需要安装vue-cil，命令如下：...
webpack+vue+vueRouter模块化构建完整项目实例超详细步骤（附截图、代码、入门篇）
yuqiz1981的博客
01-28 385
转载至：https://segmentfault.com/a/1190000008602934，大家一起进步 开始（确认已经安装node环境和npm包管理工具） 1、新建项目文件名为vuedemo 2、npm init -y初始化项目 >安装项目依赖 3、npm install --save vue默认安装最新版vue 4、npm install --save-dev webpack webpack-dev-server安装webpack，webpack-dev-se...
vue-router-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由
05-14
npm install vue - router - invoke - webpack - plugin - D cnpm cnpm install vue - router - invoke - webpack - plugin - D 纱 yarn add vue - router - invoke - webpack - plugin - D 什么是自动生成路线 ...
基于 vue-skeleton-webpack-plugin 的骨架屏实战
11-30
首先，项目基于`Vue-cli 3.x`搭建，通过`npm install vue-skeleton-webpack-plugin`安装插件。接下来，在`vue.config.js`文件中配置该插件，引入`SkeletonWebpackPlugin`并设置相关参数，例如入口文件`app: path....
vue-vuex-router-element-webpack:基于Vue、Vue router、Vuex、Element搭建的基础MVVM框架
05-08
Vue Router (路由) axios (http库) Element UI (UI框架) Babel (ES6/7代码转译浏览器可执行) Webpack (打包工具) 安装调试 npm i # 或 yarn npm run start # 或 yarn start 打包 npm run build # or yarn build
vue2-vue-router2-webpack2:《从零构造vue2 vue-router2 webpack4工程》《从零构造vue2 vue-router2 webpack3工程》《搭建vue2 vue-router2 webpack3多入口工程》
03-25
《从零构造vue2 vue-router2 webpack4工程》对应 《从零构造vue2 + vue-router2 + webpack3工程》对应分支master 《构建vue2 vue-router2 webpack3多入口工程》对应
【前端】vue学习4： cli项目、模块化（了解）、Webpack、vue-router路由
编程学习集装箱
08-21 543
vue-cli vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;  预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速; 主要的功能: 统一的目录结构 本地调试 热部署 单元测试 集成打包上线 需要的环境 Node.js : http://nodejs.cn/download/ 安装就无脑下一步就好,安装在自己的环境目录下 Git : https://git-scm.com/downlo
手把手教你用vue-cli、webpack、vue-router、vue-resource构建单页应用（SPA）
前端小七的博客
06-16 1799
vue-cli webpack vue-router vue-resource vue-cli:一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目 webpack:是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源 vue-router:SPA单页应用必备路由模块（下面详细介绍） vue-resour
Vue中如何使用vue-resource获取端口数据
github_38469586的博客
05-02 1898
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
Vue npm run build打包时uglifyjs报错TypeError: requestShortener.shorten is not a function
qq_36834487的博客
01-16 2519
报错的日志： 0 info it worked if it ends with ok 1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe', 1 verbose cli   'C:\\Users\\Administrator.WIN10-711081256\\AppData\\Roaming\\npm\\node_modules\\npm
vue+webpack项目结构简述（转载）
wutingyehe的专栏
12-25 751
因为看到这位作者写得非常清楚，忍不住转载了。 一个典型的项目结构项目结构说明 - main.js - 声明 Vue 项目的依赖。 - 声明 Vue 项目的入口（ DOM 挂载点） - Vue 插件的基本设置。 - router.js - 配置路由规则 - 关于 CSS 的一些说明 - 业务型 CSS：单独写成 CSS 文件，并
Vue2+VueRouter2+webpack 构建项目实战（二）目录以及文件结构
热门推荐
FungLeo's Blog
11-15 5万+
Vue2+VueRouter2+webpack 构建项目实战（二）目录以及文件结构通过上一篇博文《Vue2+VueRouter2+webpack 构建项目实战（一）准备工作》，我们已经新建好了一个基于vue+webpack的项目。本篇博文将详细的厘清一下这个项目的结构，然后我们要从哪里开始等。项目目录以及文件结构。![](http://ww4.sinaimg.cn/large/0060lm7Tgw1
vue+webpack搭建项目超详细教程
我是泛滥
08-06 1万+
在使用vue-cli之前，请确认你的电脑已经安装了 node，建议版本在 8.0.0 以上
使用 Vue + ElementUI + Webpack + VueRouter 做后台管理、RESTful 交互
IT小村
08-25 4万+
一、前言 前端三大 JS 框架 Vue、React、Angular 都用了一段时间了，最后还是回归于 Vue JS demo Vue [增删改查] 使用 Vue2.x + LayUI 做后台管理 CRUD 界面和 REST 交互 React [增删改查] 使用 React + LayUI 做后台管理 CRUD 界面和 RESTful 交互 An...
windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
安树的博客
11-24 7715
windows下vue-cli及webpack 构建网站(一)环境安装  windows下vue-cli及webpack 构建网站(二)导入bootstrap样式 windows下vue-cli及webpack 构建网站(三)使用组件 1、本篇文章是建立在以上三篇文章的基础上的。 2、安装 vue-router 插件，运行cmd进入到项目目录下面，运行以下命令： cn
Vue2.0实战：vue-router与webpack构建简单实例
1. 全局安装vue-cli：通过运行`npm install -g vue-cli`命令来安装Vue的命令行工具。 2. 初始化项目模板：使用`vue init webpack-simple <project-name>`命令创建基于webpack的简化版Vue项目。在这个例子中，项目名...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值