引用1:https://segmentfault.com/a/1190000008557578 引用2:https://blog.csdn.net/wulala_hei/article/details/80488674 引用3:http://www.runoob.com/vue2/vue-install.html 快速入门vue-cli配置 手撕vue-cli配置文件——config篇 vue-cli webpack配置分析 手撕vue-cli配置文件——check-versions.js篇 手…

制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开的api来做项目.不过本章节不涉及调用接口等内容.这里,我们假设我们的项目是做俩页面,一个列表页面,一个内容页面.列表页面有分页等,内容页面展示. 因此,我们需要两个模板文件. 我们在src/page目录下面新建两个文件,分别是index.vue和content.vue index.vue代码: <…

通过上一篇博文<Vue2+VueRouter2+webpack 构建项目实战(一):准备工作>,我们已经新建好了一个基于vue+webpack的项目.本篇文章详细介绍下项目的结构. 项目目录以及文件结构 如图所示: 如上图所示,自动构建的vue项目的结构就是这样. 目录/文件 说明 build 这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管. config 配置目录,默认配置没有问题,所以我们也不用管 node_modules 项目开发依赖的一些模块 src 开发目录(…

Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表:  Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述…

参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: node.js vue.js webpack前端工程化 本篇不是写给零基础的同学看的,读者应具备一些服务器开发.前端开发基础 本篇目标使用webpack+vue.js构建前端工程化本篇目标node.js基本入门node.js介绍环境搭建npm介绍npm淘宝镜像使用cnpm安装包node.js模块化程…

前言 通过前面几章的实战,我们已经顺利的构建项目,并且从API接口获取到数据并且渲染出来了.制作更多的页面,更复杂的应用,就是各位自己根据自己的项目去调整的事情了. 本章讲一下如何配置子路由,因为我们的项目不可能只有一个页面,而是由众多页面构成的. 新建子路由页面 在第二节中,我们新建了一个src/frame/subroute.vue的子页面.当时是留空放在那里的.这里,我们给它填写上内容,代码如下: <template> <div> <div class="mai…

前言:为什么要用webpack搭建项目呢,因为这个工具可以把目前浏览器不全部支持的ES6语法,通过打包工具生成所有浏览器都支持的单个JS文件. 参考: https://blog.csdn.net/u012863664/article/details/72813941 使用vue2.0+webpack搭建项目的步骤如下,以下全在命令窗口输入命令语句: 安装node和npm node下载:node下载地址 新版的node集成了npm,所以node安装好后npm也一并安装好了,我们可以通过cmd命令行…

新建项目 开始(确认已经安装node环境和npm包管理工具) 1.新建项目文件名为start_vuedemo 2.npm init -y 初始化项目,我的win7系统,工程在d盘的vue_test_project文件夹下的名为start_vuedemo的工程文件夹 如图所示: 在该工程下自动生成一个package.json文件. 安装项目依赖 3.npm install --save vue 默认安装最新版vue 4.npm install --save-dev webpack webpack-…

环境准备 首先,要开始工作之前,还是需要把环境搭建好.需要的环境是nodejs+npm,当然现在安装node都自带了npm. 在终端下面输入命令node -v会有版本号出来.就说明安装成功了.输入npm -v也会有版本号出来,就说明,npm也已经安装好了. vue-cil构建项目 vue-cil是vue的脚手架工具.其模板可以通过 vuejs-templates 来查看. 首先安装vue-cil,命令: $ npm install -g vue-cli 注:上面代码中的 $ 为终端前缀,不是让你…

通过前面几篇教程,我们已经顺利搭建起来了,并且已经组建好路由了.本章节,我们需要做一个列表页面,然后利用获取 http://cnodejs.org/api 的公开API,渲染出来. 我们打开src/page/index.vue文件,在这里写入下面的代码: <template> <div> <h1 class="logo">cnodejs Api Test</h1> <ul class="list"> <…