Window10 下部署Webpack+Vuejs构建前端环境(1)
2017-06-29 12:28
1186 查看
1、安装node.js
node.js的官方地址为:https://nodejs.org/en/download/。
根据windows版本后,选择要下载的安装包,下载完毕,按照windows一般应用程序,一路next就可以安装成功,建议不要安装在系统盘(如C:)。
2、设置global和cache路径
设置路径能够把通过npm安装的模块集中在一起,便于管理。
(1)在nodejs的安装目录下,新建node_global和node_cache两个文件夹,如安装目录为“D:\nodejs\”
(2)用命令np
4000
m config set prefix "D:\nodejs\node_global"和npm
config set cache "D:\nodejs\node_cache"设置global和cache,设置成功后,后续用命令npm install -g XXX安装,模块就在D:\nodejs\node_global\node_modules里。
3、设置环境变量
说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径。
(1)修改用户变量PATH:把"D:\nodejs\node_global"加到后面。
(2)新增系统变量NODE_PATH:设置成“D:\nodejs\node_global\node_modules”。
4、安装cnpm
说明:由于许多npm包都在国外,用淘宝的镜像服务器,对依赖的module进行安装。
参考网址为:http://npm.taobao.org/
安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org
5、用cnpm安装vue
安装命令为:cnpm install vue -g
6、安装vue命令行工具
安装命令为:cnpm install vue-cli -g
7、创建工程
(1)cd命令进入将要新建工程的目录,如“E:\nodejs”
用命令"vue init webpack mytest"创建一个基于 webpack 模板的新项目,工程名为"mytest"。
(2)cd命令进入mytest目录
(3)安装该工程依赖的模块
用命令"cnpm install”安装该工程依赖的模块,这些模块将被安装在:mytest\node_module目录下,node_module文件夹会被新建,而且根据package.json的配置下载该项目的modules。
(4)运行项目
用命令“cnpm run dev”测试该项目是否能够正常工作,用nodejs来启动。
8、安装组件
1)引入juqery组件:cnpm install jquery cropper --save
在main.js 引用jquery组件,
9、开发环境域名绑定
修改/config/index.js 文件中的proxyTable 代理
未完待续...
node.js的官方地址为:https://nodejs.org/en/download/。
根据windows版本后,选择要下载的安装包,下载完毕,按照windows一般应用程序,一路next就可以安装成功,建议不要安装在系统盘(如C:)。
2、设置global和cache路径
设置路径能够把通过npm安装的模块集中在一起,便于管理。
(1)在nodejs的安装目录下,新建node_global和node_cache两个文件夹,如安装目录为“D:\nodejs\”
(2)用命令np
4000
m config set prefix "D:\nodejs\node_global"和npm
config set cache "D:\nodejs\node_cache"设置global和cache,设置成功后,后续用命令npm install -g XXX安装,模块就在D:\nodejs\node_global\node_modules里。
3、设置环境变量
说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径。
(1)修改用户变量PATH:把"D:\nodejs\node_global"加到后面。
(2)新增系统变量NODE_PATH:设置成“D:\nodejs\node_global\node_modules”。
4、安装cnpm
说明:由于许多npm包都在国外,用淘宝的镜像服务器,对依赖的module进行安装。
参考网址为:http://npm.taobao.org/
安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org
5、用cnpm安装vue
安装命令为:cnpm install vue -g
6、安装vue命令行工具
安装命令为:cnpm install vue-cli -g
7、创建工程
(1)cd命令进入将要新建工程的目录,如“E:\nodejs”
用命令"vue init webpack mytest"创建一个基于 webpack 模板的新项目,工程名为"mytest"。
(2)cd命令进入mytest目录
(3)安装该工程依赖的模块
用命令"cnpm install”安装该工程依赖的模块,这些模块将被安装在:mytest\node_module目录下,node_module文件夹会被新建,而且根据package.json的配置下载该项目的modules。
(4)运行项目
用命令“cnpm run dev”测试该项目是否能够正常工作,用nodejs来启动。
8、安装组件
1)引入juqery组件:cnpm install jquery cropper --save
在main.js 引用jquery组件,
import $ from 'jquery' window.$ = $ window.jQuery = $ export default $这样即可在所有地方使用window.$.ajax等jquery操作。如若想使用$,请在每个vue或者js下引入jquery组件即可
import $ from 'jquery'
9、开发环境域名绑定
修改/config/index.js 文件中的proxyTable 代理
module.exports = { dev: { proxyTable: { '/api': { target: 'http://www.myos.com', changeOrigin: true, pathRewrite: { '^/api': '' } } },然后引用接口时,以/api 代替 target里面的域名即可。例如
window.$.ajax({ url: '/api/logout', // 等同请求http://www.myos.com/logout type: 'GET', dataType: 'json', success: function(data) { alert(data) } })
未完待续...
相关文章推荐
- 【WEB开发】webpack+vue构建前端开发环境
- 详解基于webpack和vue.js搭建开发环境
- Vue.js+Webpack+Sass+Jade(pug)网站构建
- webpack---webpack构建vue多页面框架(二、webpak.config.js)
- webpack构建vue-cli环境
- 使用webpack与vue2.0构建前端工程(一)
- node+webpack环境搭建 vue.js 2.0 基础学习笔记
- 基于webpack和vue.js搭建开发环境
- 用 Webpack 来搭建 Vue.js 的开发环境
- Vue.js之环境搭建:nodejs+npm+webpack
- windows下vue-cli及webpack 构建网站(一)环境安装
- webpack + vue 项目 自定义 插件 解决 前端 JS 版本 更新 问题
- webpack-dev-server+vue构建开发环境(一)
- windows下vue+webpack前端开发环境搭建及nginx部署
- Vue2.0+Webpack项目环境构建到发布
- 【Web前端】Vue.js项目部署到服务器
- windows下vue-cli及webpack 构建网站(一)环境安装
- vue.js环境搭建(基于webpack和vue.js)
- vue.js使用webpack发布,部署到服务器上之后在浏览器中可以查看到vue文件源码
- webpack---webpack构建vue多页面框架(三、生产环境与开发环境)