1.需要的组件:
1.node.js :安装webpack 需要有node.js 环境
2.npm:node package manager,nodejs的包管理器,用于node插件的安装、卸载、管理以来等。
3.cnpm:因为npm安装插件是从国外服务器下载,受网络的影响比较大,乐于分享的淘宝团队,搭建了一个npmjs.org镜像每10分钟同步一次,以保证尽量与官方服务同步。
2.webpack:是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。
2.vue-cli:vue-cli是由Vue提供的一个官方cli,专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板
2.安装步骤
2.1安装node.js
1.从node.js 官网下载 https://nodejs.org/en/download/ node.js
我是windows开发环境,直接选择64位的.msi 进行安装。
2.安装完毕后,在cmd里面用node -v 测试是否安装成功。
3.在cmd中用 npm-v 检查npm 是否安装成功
4.配置npm的全局模块的存放路径、cache的路径。此处选择放在E:\Program Files\nodejs
输入如下命令:
npm config set prefix "E:\Program Files\nodejs\node_global"
npm config set cache "E:\Program Files\nodejs\node_cache"
然后将E:\Program Files\nodejs\node_global 写入环境变量path。
2.2安装cnmp
1.执行如下命令,安装cnmp
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.在cmd中输入cnpm -v, 检查是否安装成功。
2.3安装webpack
1.安装webpack,在cmd中输入如下命令
cnpm install webpack -g
2.在cmd中输入webpack --display-error-details ,检查webpack是否安装成功
2.4安装Vue-cli
1.安装vue cnpm install vue
2.安装vule-cli cnpm install -g vue-cli
3.构建前端项目
前面我们完成了相关工具的安装,下面我们开始构建前端项目ehour。
在cmd中执行如下命令:
vue init webpack hr
假如报错,检查host文件中是否有相关github的配置,假如存在,删除恢复默认配置。
构建过程中,系统会要求依次输入项目的基本信息。构建完成后,执行如下命令。运行第一个Vue项目。
cd hr
npm run dev
系统会自动构建部署应用
按照提示,访问http://localhost:8081/
第一个Vue项目已经运行起来了