【首先安装node.js】：
1. 从node.js官网下载并安装node，安装过程很简单。
2. npm 版本需要大于 3.0，如果低于此版本需要升级它：

# 查看版本
npm -v
2.3.0

#升级 npm
cnpm install npm -g

3.基于node.js,利用淘宝npm镜像安装相关依赖。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像（http://npm.taobao.org/）

npm install -g cnpm --registry=https://registry.npm.taobao.org
1
完成之后，我们就可以用cnpm代替npm来安装依赖包了。

三、安装vue-cli脚手架构建工具

安装全局vue-cli脚手架,用于帮助搭建所需的模板框架

cnpm install -g vue-cli
回车，等待安装...
vue
回车，若出现vue信息说明表示成功！！！

【然后：】

1· 切换到想要安装的目录文件下:
cd 路径名称

2· vue init webpack 新建项目名称
【如果安装不成功，可执行此命令解决error错误：
npm cache clean --force 】

3· 一路enter键，--->3个yes一个no // 或者1个yes3个no

4· cd 项目名称

5· 运行Vue的指令： npm run dev

6· 安装路由vue-router：：
npm install vue-router --save-dev

7· 安装axios插件，用于调接口restful，或者读取数据
npm install axios --save-dev

8· 安装swiper轮播插件 或者 vue-awesome-swiper插件其中1个：：
npm install swiper --save-dev
npm install --save-dev vue-awesome-swiper

9· 安装3个封装好的插件：（muse-ui mint-ui element-ui）
npm install muse-ui --save-dev
npm i mint-ui -S
npm i element-ui -S

10· 安装css和less插件：
npm i --save-dev less less-loader
npm i --save-dev css-loader style-loader

【webpack环境构建：】

1· 创建项目根目录（文件名）切换到目录

2· 初始化
npm init -y

3· 全局安装（安装过可以不用安装）
npm install webpack -g

4· 安装webpack服务（必须安装）
npm install webpack --save-dev
--save: 将安装的包的信息保存在package中
--dev:开发版本,只是项目构建的时候使用,项目构建完成后并不依赖的文件

5· 【重要】安装webpack开发工具（必须安装）
npm install webpack-dev-server --save-dev

6· 加载css、less 模块：：
1·安装css-loader
npm i --save-dev css-loader style-loader

2·安装less -loader
npm i --save-dev less less-loader

【重要配置引入：：】
在index.html文件的head部分引入弹性盒配置的属性：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
在index.html文件的body主体部分【引入出口-bundle.js文件】：
<script src="js/bundle.js" type="text/javascript" charset="utf-8"></script>

7· 项目运行的命令,【先切换到js目录】 （编译 entry.js并打包到 bundle.js文件中）

直接执行： webpack
或者
webpack entry.js bundle.js

8· 【重要：写代码时--实时监听热更新 --progress --colors --watch 插件】
【不用每次都执行刷新的命令webpack，手动F5在浏览器直接刷新即可！】
webpack --progress --colors --watch

9· 项目运行打包【压缩】的命令：

webpack -p（在此之前必须先执行webpack指令）

【 1·如果打包压缩不成功，例如：函数方法find()--->改为find:function()的写法，
2·template模板中不解析【上引号``---->改为 1·单引号必须写为一行， 2·或者使用拼接符“+号”】
】

基本使用：：

1·首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js：

<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

2· 创建entry.js

使用路由：必须写这句话---- 【 Vue.use(VueRouter); 】

//在页面中引入文件，例如：：
require('../css/style.less');

// entry.js : 在页面中打印出一句话
document.write('It works.')

3·创建配置文件webpack.config.js

var webpack = require('webpack')

module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [

//配置css::
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},


//配置less::
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
}

]
}
}

使用模块：：

1· 创建模块module.js,在内部导出内容

module.exports = 'It works from module.js'

2· 在entry.js中使用自定义的模块

//entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模块

Vue项目模板--和--webpack自动化构建工具的---项目打包压缩使用的更多相关文章

  1. webpack自动化构建你的项目

    1.读万卷书,行万里路. 2.书山有路勤为径,学海无涯苦作舟. 技术段: 相信很多刚接触前端的小伙伴,对一些自动化工具会感觉无可下手.现在前端的发展的势头,势必和后台形成一个对立面,独挡一面. 这篇文 ...

  2. 亚信UED前端流程自动化构建工具

    亚信UED前端流程自动化构建工具 .wmd-input, .wmd-input:focus, #md-section-helper {font-size: 14px !important;line-h ...

  3. webpack前端构建工具学习总结（四）之自动化生成项目中的html页面

    接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...

  4. 前端项目自动化构建工具——Webpack入门教程

    参考资料:https://www.webpackjs.com/(中文文档)   https://www.webpackjs.com/(官方文档) 首先有必要说明一下,本文侧重讲解webpack基本配置 ...

  5. JavaScript自动化构建工具入门----grunt、gulp、webpack

    蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css   需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动  自动化时代的程序员: 希望一切都可以自动完成  ...

  6. 前端自动化构建工具--Gulp&&Webpack

    前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理,将文件或资源处理成需要的最佳输出结构和形式. 在处理过程中,我们可以对文件进行模块化引入.依赖分析.资源合并.压缩优化.文件嵌入.路径替换 ...

  7. 前端开发自动化工作流工具，JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  8. JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  9. webpack前端构建工具学习总结（一）之webpack安装、创建项目

    npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...

随机推荐

  1. Mycat 分片规则详解--一致性hash分片

    实现方式:基于hash算法的分片中,算法内部是把记录分片到一种叫做"bucket"(hash桶)的内部算法结构中的,然后hash桶与实际的分片节点一一对应,从此实现了分片.路由的功 ...

  2. Mycat 分片规则详解--日期范围 hash 分片

    实现方式:其思想和范围取模分片一样,由于日期取模会出现数据热点问题,所以先根据日期分组,再根据时间 hash 使得短期数据分布跟均匀. 优点:避免扩容时的数据迁移,可以在一定程度上避免范围分片的热点问 ...

  3. Linux 绝对路径与相对路径

    根据文件名写法的不同,可将所谓的路径(path)定义为绝对路径(absolute)和相对路径(relative). 绝对路径:由根目录(/)开始写起的文件名或目录名称. 相对路径:相对于当前路径的文件 ...

  4. Nginx目录浏览功能

    要给其他人提供一个patch的下载地址,于是想用nginx的目录浏览功能来做,需要让其他人看到指定一个目录下的文件列表,然后让他自己来选择该下载那个文件:效果如图. 实现步骤:在虚拟主机配置文件里面开 ...

  5. 解决exlicpe以debug模式启动或运行速度非常慢的问题

    该问题可能是由于eclipse和tomcat的交互而产生的, 在以debug模式启动tomcat时,发生了读取文件错误, eclipse自动设置了断点,导致tomcat不能正常启动. 解决方法如下:以 ...

  6. 关于css的text-indent首行缩进两个字符和图片缩进的问题

    段落前面空两个字的距离,不要再使用空格了.应该使用首行缩进text-indent. text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字. <style typ ...

  7. GLES2学习VBO和VAO的使用

    在GLES2中使用VBO和VAO对象,已经简单vs,ps绘制一个三角形. 1. 初始化操作代码,创建VBO.VAO,编译和链接shader program. void DebugApplication ...

  8. 记录python接口自动化测试--把操作excel文件的方法封装起来(第五目)

    前面补充了如何来操作excel文件,这次把如何获取excel文件的sheet对象.行数.单元格数据的方法进行封装,方便后面调用 handle_excel.py# coding:utf-8 import ...

  9. 高级软件工程第四次作业（C++）

    1 团队组成和选题情况说明 1.1 Git链接:https://github.com/WHUSE2017/C-team 1.2 团队组成: PM:齐爽爽(258) 小组成员:马帅(248),何健(26 ...

  10. 第201621123043 《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 为你的系统增加网络功能(购物车.图书馆管理.斗地主等)-分组完成 系统还在创建中..... 为了让你 ...