一,本文将分享如何快速搭起基于webpack + vue的前端项目框架,利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置,再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架。下面是具体实操。
二,基本命令操作。
1。在开发之前需要首先安装node . js,直接百度搜索或者在其中文官网也可以下载http://nodejs.cn/download/
在装完节点之后npm包管理工具也自动的安装好,安装完之后,在命令行输入节点- v或者npm - v,出现版本号说明安装成功。如下图所示:
2。在使用npm之前,最好把镜像换成淘宝的,长久使用,跑一下命令:npm config 设置注册https://registry.npm.taobao.org
替换成功后跑npm配置得到注册命令显示淘宝镜像路径的话就代表替换成功。
3。第二步全局安装vue-cli,在命令窗口输入npm安装- g vue-cli,然后跑vue - v出现版本号证明安装成功。
4。开始生成项目,在本地硬盘找一个目录存放代码,然后打开命令行cd切换到相应的路径下,然后跑,vue init webpack Vue-Project(项目名称)
5。输入cd Vue-Project ,然后安装依赖npm安装,如果平常时开发就跑npm运行dev(本地开发跑代码),如果需要打包则跑npm运行构建。
6。项目默认监听的是80端口,容易跟其他应用引起端口冲突,所以在项目下打开配置文件夹,打开index.js,把端口改为8888年,这样就避免冲突了,
7。最后重新跑指令npm运行开发,,然后再地址栏输入http://localhost: 8888年,就会出现相应的页面。
三,添加相应的框架以及依赖
1。引入sass预编译工具加快编码速度,跑命令npm安装node-sass——save-dev npm install sass-loader save-dev,如果node-sass比较难装的话可以换成cnpm来下载依赖,具体可百度下做法。
操作:
在组件目录下新建一个头的目录,新建两个文件头。vue, header.scss,然后引入到app.vue中使用,因为vue讲的是模块化开发,所以我喜欢把样式跟组件放到一个文件夹里跟其他模块区分,
App.vue:
header.scss:
这样就证明sass是安装成功了。
, 2。引入axios接口请求框架,跑命令npm install axios——save-dev npm安装qs;
,然后在src目录下新建一个http.js文件进行接口请求的相关配置,
