一、通过vue-cli创建了一个demo。

(vue-cli是快速构建这个单页应用的脚手架,本身继承了多种项目模板:webpack(含eslit,unit)和webpack-simple(无eslint,unit)),这些模板都是基于webpack。

安装步骤如下:

1)安装vue-cli ,配置vue命令环境:运行cnpm install vue-cli -g

2)初始化项目,生成项目模板:运行

vue init webpack-simple vue-cli-demo

cd vue-cli-demo

cnpm install

npm run dev  运行后页面如下图

npm run build  //打包输出,上线

二、如何看懂一个vue项目

1)首先在webpack.config.js看到module.exports={}里面entry入口文件 是src/main.js 。output输出文件在build.js中

2)看main.js里面引入和很多需要的文件(有路由文件、axios文件、懒加载、等)

其中关于懒加载 可以看https://www.cnblogs.com/xyyt/p/7650539.html

3)看main.js里面引入的App.vue(这个里面有加载图片,路由文件,底部导航组件),而路由文件是在mian.js里面引入的,在App.vue里面引入总的。路由文件相关的组件引入是在router.config.js里,在找相关的组件。

三、在此项目的基础上修改为自己的项目

1)首先引入一些后台的文件。如xx.sql、server.js、route/index.js、libs/common.js等

2)

详细记录vue项目实战步骤(含vue-cli脚手架)的更多相关文章

  1. vue项目实战, webpack 配置流程记录

    vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...

  2. webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

  3. vue项目实战

    本篇文章主要介绍了vue的环境配置,vue项目的目录结构以及在开发vue项目中问题的一些解决方案. 环境配置及目录结构 1.安装node.js(http://www.runoob.com/nodejs ...

  4. Spring Boot +Vue 项目实战笔记(一):使用 CLI 搭建 Vue.js 项目

    前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...

  5. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  6. Vue公司项目实战步骤

    一.无权限,无验证的Vue项目 1.打好HTML+CSS+JS基础,及<Vue 2.0 实战> 2.编写用mock设计的案例: 3.将以上案例的后台用C#改写: 二.带安全验证的Vue项目 ...

  7. windows下vue项目启动步骤

    原创:https://blog.csdn.net/qq_27680317/article/details/71123051?locationNum=10&fps=1 不是ngnix服务器是,忽 ...

  8. vue项目创建步骤 和 路由router知识点

    菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...

  9. Vue 项目实战系列 (一)

    最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https:// ...

随机推荐

  1. 单击GridView控件,高亮单击所在的记录行

    看过下面博文的网友,也许都会觉得有点遗憾,就是很难知道自己点击的是哪一记录行.http://www.cnblogs.com/insus/p/3211017.html 针对这个问题Insus.NET再对 ...

  2. C++日志模块实现的经验之谈

    以类的方式对日志模块进行封装,可创建一个单实例的接口或创建一个全局的日志对象指针,同时提供相应的对外写日志接口. 写日志的接口采用可变参数来建立,可使用va_list类型和##args参数,同时在写日 ...

  3. ssh 免密码远程登录

    背景: 公司有两台服务器A与B,经常会碰到代码中的配置文件不一致的情况...............,为了反面让两台服务器配置统一,所以需要写个shell脚本,用到的linux命令主要是scp 1.在 ...

  4. Java性能优化之高性能JAVA代码的若干个习惯

    创建对象: 1.避免在循环体中创建对象,循环前应该创建对象,避免浪费更多内存空间和增加GC负担 这种情况在我们的实际应用中经常遇到,而且我们很容易犯类似的错误,例如下面的代码: for (int i ...

  5. PerformCallback

    实现客户端,服务端异步通信的. 从客户端到服务端的通信:PerformCallback().PerformCallback就是从客户端到服务端的桥梁,它是单向的只能从客户端发起到服务端.在Perfor ...

  6. hdu1403(后缀数组模板)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1403 题意: 给出两个字符串, 求他们的最长公共子串 思路: 两个字符串的最长公共子串长度显然就是两个 ...

  7. 灾后重建 Floyd

    题目背景 BBB地区在地震过后,所有村庄都造成了一定的损毁,而这场地震却没对公路造成什么影响.但是在村庄重建好之前,所有与未重建完成的村庄的公路均无法通车.换句话说,只有连接着两个重建完成的村庄的公路 ...

  8. C. The Fair Nut and String 递推分段形dp

    C. The Fair Nut and String 递推分段形dp 题意 给出一个字符串选择一个序列\({p_1,p_2...p_k}\)使得 对于任意一个\(p_i\) , \(s[p_i]==a ...

  9. UITableView 编辑模式(增加-删除-移动---自定义左滑 title) xib cell

    参考:  http://www.open-open.com/lib/view/open1430008922468.html - (void)viewDidLoad { [super viewDidLo ...

  10. centos6.4安装过程中无法出现图形化界面

    今天在VMware9.0安装centos6.4的时候,前面的步骤都没问题,到跳过媒体检查这一步后,就发现和之前的不一样了,这次安装不是图形界面,导致后面的安装不方便 一开始以为是centos的版本不一 ...