一. 安装nodejs,这个网上已经有很多教程就不多说了,按照默认配置安装以后node里会自带npm包管理工具
(1) 安装npm淘宝镜像(可以在某些命令下用cnpm替代npm,下载安装的速度更快)
npm install -g cnpm --registry=https://registry.npm.taobao.org
(2) facebook开源出新的包管理工具,yarn,亲测比npm好用许多,给个传送门,大家可以去看看,另外贴一个yarn与npm命令行的比较帖
二. 全局安装vue脚手架和webpack
npm install vue-cli webpack -g
三. 使用vue-cli脚手架工具初始化项目
vue init webpack xxx(项目名称)
四. 填写完项目名称,描述,作者,模板编译,eslint配置(标准),单元测试的需求以后进入项目文件夹
cd xxx(项目名称)
五. 安装npm包的依赖(vue-cli会默认配置package.json,其中dependencies对应的依赖列表会被webpack打包到生产环境,而devDependencies对应的依赖立标只是在开发环境时会被引用,不会运用到生产环境。另外,如果有需要添加额外的依赖时,--save代表添加依赖到package.json文件中dependencies的依赖列表下,而--save-dev则是添加依赖到devDependencies下)
npm install/yarn install/yarn(根据当前文件夹下的package.json来下载安装对应的依赖)
六. 测试以上步骤是否生效,成功则能在浏览器看到vue的测试首页
npm run dev/yarn run dev(开发环境下webpack调用一个自带的express服务器展示你的代码)
七. 添加less依赖,从而可以直接在.vue文件中写less代码(需要给style加上lang="less"属性)
npm install less less-loader --save-dev/yarn add less less-loader --dev
<style lang="less" scoped>
body {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
}
</style>
八. 给项目添加一个可以发起http请求的插件
(1)添加vue-resource依赖(这里使用--save安装,是因为生产环境也还是需要使用到vue-resource)
安装vue-resource:npm install vue-resource --save/yarn add vue-resource
(2) 这里也可以使用vux这个框架,框架也集成了ajax功能,使用方法和vue-resource一样,目前来看个人感觉vux会比饿了么的mint-ui好用一些,这里有一点要提醒的是,如果使用了vux的话,记得一定要配合vux-loader使用,不然程序会报错
安装vux:npm install vux --save/yarn add vux
安装vux-loader:npm install vux-loader --save-dev/yarn add vux --dev
九. 配置webstorm下对vue模板的支持
File - Settings - Plugins - Browse repositories - vue.js(install)- 重启webstorm - File and Code Templates - 设置新建vue文件的模板(模板设置例子如下)
/**
* Created by xxx on ${DATE}.
*/
<template>
<section class="">
</section>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
</style>