一.前言 最近接手了一个项目,后端是django,前端是django自带的模板,用的是jinja2,写了一段时间发现用起来特别不顺手,于是想在保持现有的模板基础上,引入vue框架,这样同事可以继续用自带的模板开发,而我也可以用比较熟悉的vue.js.但是发现网上的教程都是整个项目要不就是vue框架要不就是纯html,没有把两者结合起来的教程,在研究了整整两天的情况下终于突破瓶颈,分享一下自己的经验,谢谢大家捧场…

一.环境搭建 1.1.去官网安装node.js( http://www.runoob.com/nodejs/nodejs-install-setup.html  ) 注意node的版本,只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错.推荐最新版本. 下载安装包之后直接点击安装即可.测试安装成功的界面如下: 1.2.利用npm安装webpack 命令行语句为npm install webpack -g  .测试安装成功的界面如下: 1.3.下面就是安装淘宝镜…

最近几天项目上使用了vue.js作为一个主要的开发框架,并且为了发布的方便搭配了webpack一起使用.CSS框架使用的是vue-strap(vue 对bootstrap控件做了封装)这篇文章主要总结一下具体搭建的过程,和途中遇到的一些问题的解决办法 主要用到的工具 Vue webpack vue-strap vue-router 搭建步骤 1. 首先建立项目的目录结构 demo_project/ dist/ webpack生成的文件 src/ 源代码文件 img/ 图片文件 css/ css文…

现在开始安装环境 一.安装node.js 首先要安装node.js,去nodejs官网下载即可,地址:http://nodejs.cn/中文网. 安装完成后,打开终端(windows键+R)搜索cmd,输入命令行node -v 和 npm -v,如果能显示出版本号,就说明安装成功. 二.安装vue-cli 输入命令:npm install -g vue-cli 三.在桌面新建文件夹,并进入文件夹(回顾一下用命令来操作) 四.准备工作做好,开始正式的搭建项目 输入命令:vue init webpa…

前提: 1.  借助Node.js环境里的npm来安装, 2.  设置好npm镜像, (比如淘宝的npm镜像:输入 引用 npm install -g cnpm –registry=https://registry.npm.taobao.org 即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了 ), ==============或 者============ (配置指向源,通过 npm 命令指定下载源) 引用 npm config set registry http://re…

一个vue从无到有的搭建过程. 一.不论是webpack还是vue,最初的第一步就是安装node.js.它是基石. 从官网下载你需要的安装包:官网下载链接:http://nodejs.cn/download/ 二.下载完成后,通过查看版本检查是否安装成功: 同时检查npm版本 三.检查环境变量: 可以参考配jdk环境变量的经验. 这里需要注意:安装node.js后,我们需要npm(node package mananger),类似Linux的yarm命令.安装node成功后,npm用来安装vue…

为何有这篇文章 各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版本就更新了,又要对着帖子找文档. 但这个过程十分重要,因为你想要的一切早已都在文档中给出了说明,在查阅文档的过程中不但能学会正确的使用工具更增强了阅读文档这种姿势正确的学习能力. 本文就是记录一次不断遭遇版本问题,一路查阅文档达到学习目的的经历,分享给大家.文章中每个章节提到的相关文档都会在本章节总…

  一般第一次搭建环境的时候,多多少少还是会出点状况的.这个时候多去百度,看牛人怎么解决,然后跟着尝试,多试几遍还是能解决的. 先说一下我安装的过程吧 1.我一开始按照官网的来搭建,失败了.报错内容是响应时间过长 2.又上网找了2篇搭建博文跟着做,也失败了,报错内容是响应时间过长. 3.最后找到了这个博文链接,跟着做成功了.这是我照着做成功的案例http://blog.csdn.net/u013182762/article/details/53021374   问题的原因:被墙了.即使我已经开了…

0.先去官网下载安装nodeJS 1.在cmd中输入命令 node -version    若出现node版本号 则安装成功 2.通过命令:cd 文件夹名     进入某具体文件夹后进行如下命令操作: 3.npm install -g vue-cli         全局下安装vue-cli脚手架 4.vue init webpack project    初始化项目 此处会出现一些选项,进行图片上的操作即可 5.cd  project        进入所需project项目文件夹 5.npm…

手动搭建vue项目 搭建vue前首先搭建webpack项目 首先你应当安装一下npm以及nodejs 安装完成后,进行如下操作: // 创建项目根目录 mkdir some_project_name // 切换到项目目录下 cd some_project_name // 初始化该项目 npm init -y // 下载并安装webpack相关包 npm install webpack webpack-cli webpack-dev-server --save-dev // 手动创建相关的文件夹…