vue学习(一)项目搭建
首先需要配置node和npm,如果没有安装的话,百度一下安装教程。
如果感觉npm下载速度慢,可以使用淘宝镜像cnpm,链接地址:
http://npm.taobao.org/
安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
完成准备工作
1、开始安装脚手架工具vue-cli
打开cmd,输入以下命令,在全局安装vue-cli
方式一 npm install --global vue-cli
方式二 cnpm install --global vue-cli
方式三 yarn //需要自己去百度配置
2、初始化vue项目
windows下:管理员进入cmd,进入指定文件夹,命令如下:
初始化项目,命令如下:
vue init webpack blogweb
我这里只安装router,下章定义权限需要。直到出现下载提示: 等待下载成功!
定位到项目文件夹
cd blogweb
npm i //安装所以的依赖包
npm run dev
常见一些错误,一般都是依赖包没安装完,或者 ESLint tests e2e选择了yes
处理方式(提示缺少那个模块,就安装那个模块就OK了):
npm i webpack-dev-server
项目安装完成,运行项目。
cd blogweb
npm run dev
证明成功了!webpack 正在打包。
项目文件描述
├── README.md 项目说明文档
├── node_modules 项目依赖包
├── build 编译配置文件,可忽略
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config 项目基本设置文件夹
│ ├── dev.env.js 开发配置文件
│ ├── index.js 配置主文件
│ └── prod.env.js 编译配置文件
├── index.html 项目入口文件
├── package-lock.json npm5 新增文件,优化性能
├── package.json 项目依赖包配置文件
├── src 项目文件【开发】
│ ├── App.vue APP入口文件
│ ├── assets 初始项目资源目录
│ │ └── logo.png
│ ├── components 公共组件目录
│ │ └── HelloWorld.vue 测试组件
│ ├── main.js 主配置文件
│ └── router 路由配置文件夹
│ └── index.js 路由配置文件
└── static 静态资源目录
3、配置src文件
先配置如下项目结构,这个纯属看团队或者个人的爱好,没有强制性规范
-------------------------------------------------------------------------------------------------------------------------
├src
├── App.vue APP入口文件
├── assets 静态文件
├── api 接入后端服务的基础 API
│ └── index.js 抽取出api请求
├── components 组件
├── config 项目配置文件夹
│ └── index.js 项目配置文件
├── router 路由文件夹
│ └── index.vue // 默认子路由
├── main.js vue入口文件
├── page 各个页面
├── style 样式
├── store vue状态管理
└── utils 常用工具文件夹
└── service 服务
-------------------------------------------------------------------------------------------------------------------------
├static 一般不频繁修改,压缩过的文件,我们可以直接放里面,可减少打包的时间
├── css 样式
├── font 字体
├── image 图片文件,大项目可精确到模块
├── login 比如登陆
└── js 脚本
表现层
store/ - Vuex 状态管理
router/ - 前端路由
view/ - 各个业务页面
component/ - 通用组件
业务层
service/ - 处理服务端返回的数据(类似data format),例如 service 同时调用了不同的api,把不同的返回数据整合在一起在统一发送到 store 中
API 层
api/ - 请求数据,Mock数据,反向校验后端api
util 层
util/ - 存放项目全局的工具函数
好,我们的第一步,已经顺利完成了,下一步我们开始写代码。
vue学习(一)项目搭建的更多相关文章
- vuejs学习——vue+vuex+vue-router项目搭建(三)
前言 vuejs学习——vue+vuex+vue-router项目搭建(一) vuejs学习——vue+vuex+vue-router项目搭建(二) 为什么用vuex:组件之间的作用域独立,而组件之间 ...
- vuejs学习——vue+vuex+vue-router项目搭建(二)
前言 最近比较忙,所有第二章发布晚了,不好意思各位. vuejs学习——vue+vuex+vue-router项目搭建(一) 中我们搭建好了vue项目,我相信大家已经体验了vue其中的奥妙了,接下来我 ...
- Spring Boot 项目学习 (一) 项目搭建
0 引言 本文主要记录借用Idea 开发环境下,搭建 Spring Boot 项目框架的过程. 1 系列文档目录 Spring Boot 项目学习 (一) 项目搭建 Spring Boot 项目学习 ...
- Vue学习——使用vue-cli搭建一个简单的本地vue项目
前提 安装好node.js.npm.vue-cli.为什么要先安装这些,建议查看https://www.cnblogs.com/jixue/p/10673875.html,这个对于vue-cli理解很 ...
- vuejs学习——vue+vuex+vue-router项目搭建(一)
前言 快年底了却有新公司邀请了我,所以打算把上家公司的学到一下技术做一些总结和分享. 现在vuejs都2.0了,我相信也有很多朋友和我一样实际项目还是选择vue1.0的或者给新手一些参考,不管在选择哪 ...
- vue学习001 --环境搭建
系统 : win cmd: cmder 链接:https://cmder.net/ 1.安装node.js 链接地址: http://cdn.npm.taobao.org/dist/node/v10. ...
- vue多页面项目搭建(vue-cli 4.0)
1.创建vue项目 cmd命令执行 vue create app (app 自定义的项目名) 一般都会选择后者,自己配置一下自己需要的选项(空格为选中) 这是我个人需要的一些选项,路由Router.状 ...
- Vue -cli 入门 --项目搭建(一)
一. 安装node.js环境. 在node.js官网下载稳定版本(https://nodejs.org/en/) 下载完成后点击安装,安装过程很简单,一直next即可,安装完成会自动添加node及np ...
- vue全家桶项目搭建(vue-cli 2.9.6+vue-router+vuex+axios)
一.安装vue-cli + vue-router + vuex + axios 1.安装vue-cli 2.创建项目 3.安装vuex和axios 二.搭建项目目录结构,如下所示: 1.assets目 ...
- Vue nodejs商城项目-搭建express框架环境
1.express-project 搭建express框架环境 安装express generator生成器 通过生成器自动创建项目 配置分析 安装 cnpm i -g express-generat ...
随机推荐
- 使用内存映射文件MMF实现大数据量导出时的内存优化
前言 导出功能几乎是所有应用系统必不可少功能,今天我们来谈一谈,如何使用内存映射文件MMF进行内存优化,本文重点介绍使用方法,相关原理可以参考文末的连接 实现 我们以单次导出一个excel举例(csv ...
- Linux环境下Mysql开启远程访问权限
如何通过Window的数据库可视化工具远程连接装在Linux上的Mysql呢?可以按照以下步骤逐一确认! 检查监听端口是否存在 netstat -ntlp |grep mysql 检查Mysql配置配 ...
- python3搭建Django项目
1.本次安装的python3.7版本,可前往官网下载,这里的安装不作多余介绍 2.安装虚拟环境 第一种:virtualenv:用于创建虚拟环境,实现项目之间的环境隔离,解决项目中存在的版本冲突问题 w ...
- Jenkins自动执行python脚本输出测试报告
前言 在用python做自动化测试时,我们写好代码,然后需要执行才能得到测试报告,这时我们可以通过 Jenkins 来进一步完成自动化工作. 借助Jenkins,我们可以结合 Git/SVN 自动拉取 ...
- 轻松理解 Kubernetes 的核心概念
Kubernetes 迅速成为云环境中软件部署和管理的新标准. 与强大的功能相对应的是陡峭的学习曲线. 本文将提供 Kubernetes 的简化视图,从高处观察其中的重要组件,以及他们的关联. 硬件 ...
- oa办公系统是什么?对企业有什么作用?
OA办公系统是指利用计算机网络帮助企业实现办公自动化,用系统软件代替传统的手工工作帮助企业处理内部事务,例如文档共享.部门协作.报销.业务流程等等,最终目的帮助企业提高工作效率,实现利益最大化. 随着 ...
- Dart语言学习(六) Dart 列表List数组
创建List : var list = [1,2,3,"Dart",true]; 创建不可变List : var list = const [1,2,3,"Dart&qu ...
- 第二阶段冲刺个人任务——four
今日任务: 优化统计团队博客结果界面的显示. 昨日成果: 优化统计个人博客结果页面的显示.
- 关于Spring集成Quartz的concurrent属性
关于Spring集成Quartz的concurrent属性 以前经常在任务调度程序中使用Spring集成的Quartz,这种方式可以用简单的声明式配置即可实现定时任务,并结合了Spring自身的Bea ...
- Browser Security-css、javascript
层叠样式表(css) 调用方式有三种: 1 用<style> 2 通过<link rel=stylesheet>,或者使用style参数. 3 XML(包括XHTML)可以通过 ...