vue全家桶(vue2.x+vue-router+axios+webpack)项目搭建

本文详细介绍使用Vue2.x、Vue-Router、Axios及Webpack搭建项目的步骤。从安装Node环境开始,逐步介绍如何配置Vue-CLI并创建新项目。通过一系列命令行操作,最终实现项目的本地运行。

vue全家桶(vue2.x+vue-router+axios+webpack)项目搭建

参考博客文章 博主FungLeo的Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版
注:原博主写的非常详细 本文章为根据原博主教程总结的自己的搭建流程

一、安装node环境

二、使用node -v以及npm -v查看版本号

查看node版本号

三、安装vue-cli

npm install -g vue-cli

查看vue版本号(注:这里的-V的V必须为大写)

vue -V

四、使用vue-cli搭建项目

1.新建项目文件夹vueStudy

2.在vueStudy中打开git bash窗口

3.执行

vue init webpack vuedemo   

这是命令行会出现以下代码

? Project name (vueDemo)                   //输入项目名称 回车默认为vue init 时的vueDemo
? Project description A Vue.js project      //输入项目描述
? Author yinshiru <yin1906901803@163.com>   //输入作者
? Vue build standalone                      //需要不需要安装编译器,我选择需要安装
? Install vue-router? Yes                   //是否使用vue-router Y为使用N不使用
? Use ESLint to lint your code? (Y/n)       //是否使用ESLint语法检查 
? Set up unit tests No                      //是否使用unit测试 我没有用到选的是不选择
? Setup e2e tests with Nightwatch? No       //是否使用e2e测试 我也没有用到选择的不使用

这里写图片描述

tip:出现如上图所示提示即为安装成功,这时我们可以看一下vueStudy文件下已经生成了vuedemo项目文件

按照终端给出的提示执行命令:

cd vueDemo      //进入项目文件夹
npm run dev     //运行项目

这里写图片描述

执行成功如上图所示,在浏览器中输入localhost:8080页面出现如下图所示即为搭建成功

这里写图片描述

                                    。。。未完待续
posted @ 2018-01-09 23:36 我在等风也等你啊 阅读( ...) 评论( ...) 编辑 收藏
# URL: http://kongkong.fence.wmdev2.lsh123.com/ # jl-mis(接龙后台管理系统) 项目是基于vue-cli 3+ 构建的,请先将vue-cli升级到3+版本,vue-cli3 传送门(https://cli.vuejs.org/zh/)。 ## 技术栈 vue2 + vuex + vue-router + element-ui + webpack + ES6/7 + axios + less + flex + svg ### 项目图形化管理界面 ``` vue ui ``` ## 项目运行 #### 注意:由于涉及大量的 ES6/7 等新属性,node 需要 8.0 以上版本 ``` npm install npm run serve ``` ### 打包 ``` npm run build ``` ### 代码的 lint ``` npm run lint ``` # 项目布局 ``` . ├── public // HTML 和静态资源 │   ├── favicon.ico // 图标 │   ├── index.html // 入口html文件 ├── src // 源码目录 │   ├── assets // 静态资源 │   │   ├── images // 公共图片 │   ├── components // 组件 │   │   ├── common // 公共组件 │   │   ├── page // 页面 │   ├── libs // 封装库 │   │   ├── storage.js // 对cookie 和 localStorage 的封装 │   ├── plugins // 引用的插件 │   │   ├── axios.js // 对axios的的封装(拦截器相关) │   │   ├── element.js // 引入element-ui │   ├── router │   │   └── router.js // 路由配置 │   ├── service // 数据交互统一调配 │   │   ├── service.js // 获取数据的统一调配文件,对接口进行统一管理 │   ├── store // vuex的状态管理 │   │   ├── actions.js // 配置actions │   │   ├── getters.js // 配置getters │   │   ├── store.js // 引用vuex,创建store │   │   ├── modules // store模块 │   │   │   ├── urlGroups.js // 路由分组(权限相关) │   │   ├── mutation-types.js // 定义常量muations名 │   │   └── mutations.js // 配置mutations │   └── style // 样式字体相关 │   ├── fonts // 字体相关 │   ├── utility.less // 公共样式文件 │   ├── mixin.less // 样式配置文件 │   └── normalize.css // 样式重置 │   ├── App.vue // 页面入口文件 │   ├── main.js // 程序入口文件,加载各种公共组件 ├── vue.config.js // vue-cli 3+ 暴露出来的webpack相关的配置文件 . ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值