vue2.x+webpack快速搭建前端项目框架详解(vue wepack)

推荐整理分享vue2.x+webpack快速搭建前端项目框架详解(vue wepack)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue init webpack my-project,vue wepack,webpack vue,vue2 webpack,vuecli webpack,vuecli webpack,vue 快速,vuecli webpack,内容如对您有帮助，希望把文章链接给更多的朋友！

一、本文将分享如何快速搭起基于webpack+vue的前端项目框架，利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置，再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架。下面是具体实操。

二、基本命令操作。

1.在开发之前需要首先安装node.js，直接百度搜索或者在其中文官网也可以下载 -v或者npm -v，出现版本号说明安装成功。如下图所示：

2.在使用npm之前，最好把镜像换成淘宝的,长久使用，跑一下命令：npm config set registry config get registry命令显示淘宝镜像路径的话就代表替换成功。

3.第二步全局安装vue-cli，在命令窗口输入npm install -g vue-cli，然后跑vue -V出现版本号证明安装成功。

4.开始生成项目，在本地硬盘找一个目录存放代码，然后打开命令行cd切换到相应的路径下，然后跑 vue init webpack Vue-Project（项目名称）

5.输入cd Vue-Project 然后安装依赖npm install, 如果平常时开发就跑npm run dev(本地开发跑代码)，如果需要打包则跑npm run build。

6.项目默认监听的是端口，容易跟其他应用引起端口冲突，所以在项目下打开config文件夹，打开index.js，把端口改为，这样就避免冲突了，

7.最后重新跑指令npm run dev ,然后再地址栏输入 install node-sass --save-dev, npm install sass-loader --save-dev,如果node-sass比较难装的话可以换成cnpm来下载依赖，具体可百度下做法。

操作：

在components目录下新建一个header的目录，新建两个文件header.vue header.scss，然后引入到app.vue中使用，因为vue讲的是模块化开发，所以我喜欢把样式跟组件放到一个文件夹里跟其他模块区分，

App.vue:

header.scss:

这样就证明sass 是安装成功了。

2.引入axios接口请求框架，跑命令npm install axios --save-dev,npm install qs;

然后在src目录下新建一个http.js文件进行接口请求的相关配置，

在使用请求接口的时候直接可以这样用：(具体用法可以看下官方文档)

3.引入elementUI，跟人感觉elementUI是比较好用的vue组件UI，很多东西不用自己去写，推荐使用，跑指令npm install element-ui --save,

然后在main.js中引入使用

当然也可以按需引入，想用什么组件就引入什么组件，不要全部引入，这样减少体积。

4.引入vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

安装：npm install vuex --save

具体使用这里不做详细介绍，感兴趣的可以看下中文官网：

vue 添加vux的代码讲解 简介Vux（读音[v'ju:z]，同views）是基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面。基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-

vue组件发布到npm简单步骤 1.0新建项目1.1初始化项目输入npminit，之后需要填什么就写什么新建src目录，并在src目录下新建alert.vue$npminit$mkdirsrc$cdsrc$touchalert.vue最后的目录结构1.2修

浅谈angular4实际项目搭建总结 前言接到一个pc端后台项目，还会加入两个安卓同事一起学习和做这个项目，需要带一下他们。既ng1之后，我就没怎么有过其它后台框架的实际项目经验