搭建vue框架（vue+webpack4.0+iview2.14+vuex+es6+stylus架构一）

最新推荐文章于 2024-09-14 10:29:57 发布
最新推荐文章于 2024-09-14 10:29:57 发布
阅读量6.5k 收藏 4
点赞数 2
分类专栏： vue ecmascript6.0 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyt_angularjs/article/details/76241626
版权
本文介绍了如何搭建基于Vue的全栈开发环境，包括安装npm、node、webstorm，使用cnpm加速下载，创建Vue项目，并涉及webpack、stylus的配置。通过设置，避免了webstorm在node_modules文件夹中建立索引导致的卡顿问题。
摘要由CSDN通过智能技术生成

初始环境npm+node+webstorm：

    没有的请到官网(http://nodejs.cn/download/)下载node，node里面包含了npm

cnpm:

    cnpm是npm的淘宝镜像，可以加快npm install的下载安装速度，减少报错可能，推荐使用

    如果安装速度过慢，请安装cnpm
    命令行中输入：npm i -g cnpm --registry=https://registry.npm.taobao.org
    下面全部使用cnpm

Vue新建项目：

cnpm i  -g  vue  vue-cli  webpack -g
解释：
    此命令用于安装vue的基础环境
    i 表示install安装 
    -g表示global全局安装
    webpack是官方推荐的打包工具
  
vue init webpack youProjectName
解释： 
    此命令用于创建项目
    youProjectName处输入你项目的名字
    命令行中：
  
最低0.47元/天 解锁文章
一袋米要扛几楼_
关注
专栏目录
Vue 2.x脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
CRPER
11-07 1万+
前言文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么!有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理取闹的键盘侠” – 国际新闻版块欢迎你去 “有一定基础但又喜欢逼逼的人” 得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的 这种傻瓜文,简直浪费老子的时间! 对于以上三类人,走吧,这里
Vue全家桶实践（一）---vue-cli
热门推荐
Creabine的博客
12-25 1万+
最近公司要重写运营管理系统，不想再维护之前的backbone了，赶紧要求前端整个重写。重开新坑，用了两周多撸出了第一版，收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来，也算前端梳理一下思路。 相关博客： Vue全家桶实践（一）—vue-cli Vue全家桶实践（二）—iView Vue全家桶实践（三）—axios Vue全家桶实践（四）—vue-router Vue
vue后台管理系统iview框架
07-03
适用大部分vue2.0后台管理系统，iview框架开发后台系统 最新资源 信息系统
vue+node+webpack搭建环境
芋头
11-02 6410
本篇文章是由我最近连续两天踩过的坑整理而来，简直是坑哭了。之所以总结这篇文章一是希望大神可以纠正指教，二是希望能对像我一样第一次搭建vue环境的宝宝们，不踩坑或者说是少踩坑，三是为了自己以后不入坑，再进坑就出不来了。 前端的路很长，坑更多，所以适当的总结下总是好的。
使用Webpack创建vue脚手架并搭建路由---详解
最新发布
m0_74079648的博客
09-14 1144
Webpack配置vue3以及vue-router vue 是一个非常好用的 javascript 库，现在已经发行了 vue 3，我们可以直接导入使用库文件，也可以使用单文件（SFC）的形式，直接使用库文件会简单一点，我们先来试一下吧。
webpack 搭建Vue环境
小柒的前端之旅
07-16 462
前面的话 这篇文章将介绍如何使用webpack搭建Vue环境 初始化项目 先创建一个根目录：基于webpack搭建Vue环境（这里便于查找中文命名） 在根目录下，命令行中敲入如下命令： npm install - y 会生成一个 包含默认信息的 package.json 文件 。 然后我们在项目文件夹中创建以下几个文件夹： dist src、src/components build 其中，...
使用webpack搭建vue项目
Menqq的博客
02-26 795
webpack是打包工具 vue/react都是基于webpack进行打包的，现在来讲webpack是最主流的打包工具。 接下来我们使用webpack搭建一个vue项目。 去vue官网借鉴Vue Loader ：https://vue-loader.vuejs.org/zh/ webpack中所有的loader都是去处理不同后缀名的文件的。 起步 创建文件夹，下载基本loader npm i webpack webpack-dev-server webpack-cli@3.3 vue-loader v
webpack+vue+iview搭建管理后台
01-24
前端技术Vue2+iView2.0实践-后台管理系统，利用webpack进行项目打包，为开发者提供一个完整的项目结构和案例
nuxt vue node mysql_[vue] vue服务端渲染nuxt.js
weixin_33598481的博客
01-28 274
初始化使用脚手架工具 create-nuxt-app 快速创建npx create-nuxt-app npx create-nuxt-app 执行一些选择在集成的服务器端框架之间进行选择:选择您喜欢的 UI 框架:选择您喜欢的测试框架:选择你想要的 Nuxt 模式 (Universal or SPA)添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。添加 EsLint...
vue服务器渲染/nuxt/vant-ui/mint-ui/typeScript/stylus（简单了解带网址）
tian_98的博客
12-15 696
什么是服务器端渲染 (SSR)？ Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。 服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。 #为什么使用服务器端渲染 (SSR)？ 与传统 SPA (单页应用程序 (Single
Webpack: 搭建 Vue 全栈开发环境
Wang的专栏
06-26 753
传统 Web 开发通常会强调将页面的 HTML、CSS、JavaScript 代码分开用不同文件承载，这种思维本质上是将页面层级的结构、样式、逻辑分离成不同关注点；而现代 MVVM 框架包括 React、Vue、Angular，则强调在组件内完成所有结构、样式、逻辑定义，从而进一步缩小关注点粒度，降低开发者心智负担，以 Vue 为例，通常可以选择使用 Vue SFC 形式编写组件代码：data() {return {} , };
使用webpack搭建一个vue demo
01-08
前言：我们在开发vue过程中使用vue-cli脚手架工具能够十分快速的构建项目， 但是vue官方却十分不推荐初学者直接使用脚手架，为了更好理解vue-cli工作原理，故我们使用webpack构建一个vue demo，能够编写基本的vue代码 一.目录结构 目录结构如下： 初始化为npm项目后，创建图示文件，文件夹 mkdir webpack-vue npm init -y 二.项目依赖 首先安装webpack开发依赖 npm i webpack webpack-cli webpack-dev-server -D 安装babel相关依赖，编译es6代码 npm i babel-core b
使用webpack搭建一个简单的vue脚手架
王金鑫的博客
08-17 289
生成package.json npm init 安装依赖 npm i webpack vue vue-loader css-loader vue-template-compiler 新建文件夹src，创建文件app.vue <template> <div class="text">{{text}}</div> </template> <script> export default { data(){ retur
webpack 搭建vue脚手架
weixin_53125679的博客
06-26 232
webpack 搭建vue脚手架 初始化项目 npm init -y 安装webpack 和webpack-cli npm i webpack webpack-cli --save-dev 解析 .vue 的文件(单文件组件)，安装 vue, vue-loader, vue-template-compiler 三个插件 npm i vue vue-loader vue-template-compiler --save-dev 项目根目录下创建src文件夹， 在里边创建一个main.j
简单用webpack搭建vue开发环境
nesxiaogu的博客
03-26 713
自搭建简单的vue脚手架 准备工作 环境 node.js(v10.15.1) 初始化项目 npm init --yes 依赖包 webpack webpack-cli webpack-dev-server html-webpack-plugin vue vue-router vue-loader vue-template-compiler style-loader css-loader f...
webpack搭建vue脚手架（从零开始）
自然 醒的博客
08-16 920
都会作为模块处理。在webpack4以及之前版本都需要借助file-loader和url-loader进行打包图片，而在webpack5版本中不需要了，只需要进行配置就可以了，不需要进行任何loader。就会生成一个index.html和bundle.js,这时，点开index.html就能看的Hello World了，但是css还不能生效，需要借助一些loader去加载静态资源。输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
利用webpack搭建vue开发环境_@jie
tattoo_jie的博客
08-17 241
1、什么是Webpack 本质上，Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（static module bundler）。在 Webpack 处理应用程序时，它会在内部创建一个依赖图（dependency graph），用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个 bundle。 webpack 解决什么问题？ Webpack 可以做到按需加载。像 Grunt、Gulp 这类构建工具，打包的思路是：遍历源文件→匹配规则→打包，这个过程中做不到按需加载，即
webpack4搭建vue环境
qq_42760405的博客
03-29 222
1、config/webpack.base.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); const { VueLoaderPlugin } = require('vue-loader'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const NODE_ENV = process.env.NODE_ENV; console.log
使用 webpack 搭建 vue 开发环境（一）
Jioho的博客
09-26 722
只要一直在路上，一切都不算远 使用 webpack 搭建 vue 开发环境（一） 虽然 vue-cli 已经非常成熟，成熟到可能自己写的 webpack 性能上不一定比得上 vue-cli。当然只是性能上，在实用性，拓展性，学习性上，自己能写出符合自己工程项目的 webpack 配置才是最好的 所有的代码都已经放在了 码云@Jioho/webpack_config 毕竟 github 有点慢~这边的网络上不去 master 分支的代码是每个版本迭代后最新的代码，所以第一篇文章的最终代码在 v0.0.1 分
Vue2+Vuex+Webpack+ES6实战项目教程大公开
资源摘要信息:"vue最新实战项目，vue2+vuex+webpack+es6干货多多，新手福利" ...通过学习和实践这个项目，新手可以对Vue.js框架、Vuex状态管理、Webpack打包工具以及ES6新特性有一个全面的理解和掌握。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值