精华内容
下载资源
问答
  • 新手vue框架搭建

    2019-11-18 10:26:10
    新手vue框架搭建 什么是脚手架 “脚手架”是一种元编程的方法,用于构建基于数据库的应用。许多MVC框架都有运用这种思想。 程序员编写一份specification(规格说明书),来描述怎样去使用数据库;而由(脚手架的)...

    新手vue框架搭建

    什么是脚手架

    “脚手架”是一种元编程的方法,用于构建基于数据库的应用。许多MVC框架都有运用这种思想。
    程序员编写一份specification(规格说明书),来描述怎样去使用数据库;而由(脚手架的)编译器来根据这份specification生成相应的代码,进行增、删、改、查数据库的操作。我们把这种模式称为"脚手架",在脚手架上面去更高效的建造出强大的应用!

    好吧,其实说白点就是可以快速帮你搭建一个项目的基础架子,你直接拿过来用然后添加新项目需要的东西。

    什么是vue cli

    Vue CLI是一个全局安装的 npm 包,提供了终端里的 vue 命令。它可以通过 vue create 快速创建一个新项目的脚手架,或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

    搭建环境

    首先我们需要安装node环境,官网https://nodejs.org下载安装包。

    安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功。

    安装 Vue-cli

    在命令行工具中输入 npm install -g vue-cli,安装完成后 检查是否安装成功,输入命令vue list,出现版本号即代表成功。

    生成项目

    需要在命令行中进入到项目目录,使用命令 vue init webpack vue-demo 搭建vue项目, “vue-demo” 是你的项目名称。
    注意在建立文件名字的时候,尽量不要和vue一些关键字重复,起一些与vue无关的名字

    搭建小插曲

    在搭建过程可能会出现报错,报错有两个解决办法

    1. 更新npm npm install -g npm
    2. 清缓存 npm cache verify

    cnpm的安装方式

    因为我们用的npm的服务器是外国,有的时候我们安装“依赖”的时候很很慢很慢超级慢,所以就用这个cnpm来安装我们说需要的“依赖”。安装完成之后输入 cnpm -v,如果出现相应的版本号,则说明安装成功。

    展开全文
  • 首先说一下Vue框架吧,个人用了一段时间,一开始有点迷茫,后面逐渐认识清了,因为自己的课程里有基于node.js的Cordova移动开发课,...1、Vue框架搭建 在开发Vue之前肯定不能缺少的是Node.js了吧,Vue是依赖于Nod...

    首先说一下Vue框架吧,个人用了一段时间,一开始有点迷茫,后面逐渐认识清了,因为自己的课程里有基于node.js的Cordova移动开发课,发现Vue十分适合开发这种手机APP单页面的应用,故边学边实践,在这个过程中踩了很多坑,这里分享一下Vue和Cordova结合开发的步骤,废话不多说,开始"干"!

    1、Vue框架搭建

    1. 在开发Vue之前肯定不能缺少的是Node.js了吧,Vue是依赖于Node.js运行的,进去Node.js官网
      在这里插入图片描述这个是英文版的官网,个人推荐多去英文网看,毕竟编程领域上报错等都是英文的,需要学会看英文,进去页面显示的是64位版的,如果是32位的,到DOWNLOADS那选择下载。
      官网:https://nodejs.org/en/

    2. 下载完之后,进入doc命令行,安装Vue脚手架 npm install --global vue-cli
      在这里插入图片描述
      安装之前肯定要先检查一下Node.js是否安装成功
      接下来输入指令 npm install --global vue-cli 就可以安装了,如果嫌慢可以使用淘宝的cnpm命令管理工具可以代替默认的npm管理工具: npm install -g cnpm --registry=https://registry.npm.taobao.org;

    3. 新建一个项目,建议不要在C盘,如果你空间大的话可以忽略 vue init webpack project-name(你的项目名字)

      在这里插入图片描述下面会出现js语法检查选项都填No,接下里进入目录 cd project-name(你的项目名字),进行依赖安装,这个过程会比较久,依赖模块较多.
      在这里插入图片描述
      这个就已经安装完成了(√ All packages installed),接下来目录里就有文件了,可以开发你的项目了
      在这里插入图片描述

    2、Vue配置配置文件

    1. 在完成你的项目之后,需要结合Cordova进行模拟器调试,先引入cordova文件
      在这里插入图片描述
      拱写Cordova代码,封装起来,Cordova的插件方法几乎是异步的,封装的时候不要用return会拿不到数据,用个回调拿回数据就行了。
      在这里插入图片描述

    2. 建议在main.js中添加监听事件,不然模拟器测试的时候,哪里错了都不知道。
      在这里插入图片描述

    3. 修改config目录下的index.js、build目录下的utils.js文件
      在这里插入图片描述
      在这里插入图片描述

    4. dos命令运行 npm run build 打包成文件,在项目文件下的dict中
      在这里插入图片描述

    5. 接下来就可以放到Cordova的WWW目录下,替换调就行了,Vue要用的插件一定要提前安装好,不然肯定不能用。
      在这里插入图片描述
      接下来直接运行就行了。

    6. 运行效果图如下:
      在这里插入图片描述

    7. 也可以直接将项目建立在WWW目录下,吧路径改为上一层就行了,每次Vue打包的时候index.html自动替换Cordova的index.html 就不用那么麻烦运行一下移动一下,但是我本人使用Android Studio 开发的,一开始载入文件、运行时候要运行半天就没这样做,有兴趣的小伙伴可以试试看,可能是我电脑烂(没钱买😭)!!

    展开全文
  • vue框架搭建步骤

    2019-05-20 16:08:47
    Vue框架搭建1、vue基础框架搭建可参照https://www.cnblogs.com/princesong/p/6728250.html 结合搭建搭建vue框架前,先安装四样东西:(ie版本ie9以下vue是不支持的)1、 Node.js(根据电脑配置来安装,百度搜索或者...

    Vue框架搭建1、vue基础框架搭建可参照https://www.cnblogs.com/princesong/p/6728250.html 结合搭建搭建vue框架前,先安装四样东西:(ie版本ie9以下vue是不支持的)1、 Node.js(根据电脑配置来安装,百度搜索或者到node官网下载);2、必须在3.8版本以上才行(也可安装淘宝的npm镜像npm install -g cnpm –registry=https://registry.npm.taobao.org 来处理)。3、vue-cli脚手架的安装(建议全局安装 (npm)cnpm install -g vue-cli )4、 安装webpack (建议全局安装 (npm)cnpm install -g webpack)前四样装好后,即可开始vue框架的搭建了:选定一个安装的地方通过cmd命令vue init webpack vue_project(最后这个是我创建的项目文件夹的名字,你可自行命名,也可在执行中修改命名)  -如图1

    图1
    在安装过程中会经过这一步,问是否安严格模式情况来,我建议初学者,且没有特强的书写规范的选择no选项,以免在开发过程中出现一些严格规范要求的报错。    当选项都完成后,便会生成如下图2文件

    图2
    出现此文件,便是你的vue框架基本文件的形成。       下一步,本地安装和运行项目。在文件当前输入 cnpm install你会发现在已经创建的项目结构里面会多出一个node_modules的文件夹,里面就是刚才安装的所有依赖。安装好后在命令行中输入cnpm run dev回车即可;

    当vue跑起来后可通过页面http://localhost:8080 来打开页面,当然页面的端口好可根据自行习惯来更改,如下图文件下(config/index.js)

    图4
    比如:将prot 的参数改成 8089 ,则页面的链接为http://localhost:8089       至此,vue的简洁版框架已经搭建完成,在开发中根据项目中所需的一些功能要用到的插件,项目中必备的插件例子:Vuex     cnpm   install  vuex -–saveAxios或者 jq (调用ajax所需要的,根据情况选其一就好)  cnpm install axios --save 或者 cnpm install jquery -–saveLess 或者 sass(更好的规范样式的时候要用到的选其一就好)cnpm install less-loader less -–save-dev 或者cnpm install sass-loader sass -–save-devbabel-polyfill (此插件pc端必须要装,考虑ie9的呈现问题需要此插件)cnpm install babel-polyfill -–savecnpm  install crypto-js –-save  前后台数据获取时候的加密的一个功能文件 babel-polyfill 安装后还得配置(build/webpack.base.comf.js文件如下):

    插件就不一一举例子了,因为不同项目所需的插件不同,开发者可根据情况来安装。1、前端代码项目vue打包: (cnpm)npm run build会生成静态文件,在根目录的dist里,里面有个index.html,这是服务器访问的路径指定到这里就可以访问我们自己的项目了。但是我发现个问题就是生成index.html里引用的css和js的引用路径不对,这时候就需要自己修改一下配置了。

    再执行npm run build    即可;

    作者:_hj
    链接:https://www.jianshu.com/p/46e9df18413d
    来源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

    展开全文
  • vue框架搭建

    2020-09-23 19:42:49
    一:vue开发环境的搭建 1.安装node.js(官网:https://nodejs.org/en/download/ ),选择跟自己的电脑匹配的版本进行下载,然后一步步的安装即可。 在安装的路径下cmd,输入node -v,如果出现版本信息即表示安装成功...

    一:vue开发环境的搭建

    1.安装node.js(官网:https://nodejs.org/en/download/ ),选择跟自己的电脑匹配的版本进行下载,然后一步步的安装即可。

    在安装的路径下cmd,输入node -v,如果出现版本信息即表示安装成功。

     2.npm包管理器是集成在node中的,直接输入npm -v,就能查看到版本信息,若出现版本信息则表示npm能正常使用。

    3.输入命令,通过淘宝镜像安装相关依赖。 

     npm install -g cnpm  --registry=http://registry.npm.taobao.org

    4.安装vue-cli脚手架构建工具,输入命令,安装完成即可。

    npm install -g vue-cli 

    二:创建vue项目

    1.开始创建vue项目,使用命令。

    vue init webpack 项目名

    项目名:项目名称不能包括大写字母。

    2.会问你这个是一个vue项目吗?直接回车即可。接下来每一个提示小编都选的是Y安装。 最后提示项目创建后,会自动运行npm install 安装一些东西,直接同意之后等待。。。

    3.成功以后进入项目所在目录,安装所需依赖。

    三:启动项目

    1.进入项目所在的目录:cd myvue

    2.安装所需依赖,此依赖安装会产生node_modules文件夹,所有依赖都会安装在此文件夹内,使用cnpm install

    3.启动项目,cnpm run dev

    4.代表启动成功,浏览器访问http://localhost:8080,出现以下页面代表创建成功。

     一个简单的vue项目搭建成功。

     

     

     

    展开全文
  • 最近这两天有点闲,通过自研学习了如何使用express框架搭建后台以及vue框架开发前端。express框架是用来搭建web服务,是nodejs的二次封装。vue就是前端框架。那么可以通过搭建express框架用来写接口,vue框架写页面...
  • Vue框架搭建快速入门

    2021-09-16 20:51:34
    如何快速的搭建一个Vue框架安装的环境说明 安装的环境 - node.js https://nodejs.org/zh-cn/(官网) https://npm.taobao.org/mirrors/git-for-windows/(淘宝镜像) 安装的步骤只需要无脑的安装,下一步(可以...
  • vue框架搭建步骤详解

    2020-11-06 17:57:02
    首先,安装node.js 各种版本的...webpack是官方推荐的标准模板名 vue init webpack 项目名称 //vue-cli3.x的初始化方式,目前模板是固定的,模板选项可自由配置 vue create 项目名称 按照提示回答即完成vue框架搭建
  • vscode+vue 框架搭建

    2019-04-03 14:52:00
    安装完成之后打开cmd:node -v 查看版本(npm一体的,可以直接查看),显示下图安装成功 第二步: 安装淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org 第三步: 安...
  • vue框架建立完成.rar

    2019-07-04 19:59:33
    此压缩包是vue基于hbuilderx进行编写的,实现了vue框架搭建,同时完成vue的登录界面。
  • 下面是搭建前端框架vue.js的步骤: 1.在官网下载node.js,地址:https://nodejs.org/en/download/(下载对应的版本),一路默认,进行安装 2.完成后,在安装路径下打开命令窗口,输入node -v,检查版本信息(成功...
  • 前端Vue项目框架搭建

    2020-12-14 13:23:46
    前端Vue项目框架搭建Vue项目搭建方式vue uivue create Vue项目搭建方式 vue项目搭建通过vue脚手架主要有两种方式:图形界面的vue ui 以及命令行形式的vue create。 vue ui 选择任意文件夹作为项目框架路径(注意:...
  • 在这里我们先快速的搭建一个vue的脚手架: (1).在安装vue的环境之前,安装NodeJS环境是必须的。可以使用node -v指令检查,需要保证安装了4.0版本以上的nodeJS环境。 没有安装的话,去Node.js的官网下载一下,...
  • 现如今,vue是前端工程师比较常用的框架之一,使用vue需要的安装环境如下: 镜像安装:--npm install-g cnpm--registry=https://registry.npm.taobao.org; 淘宝镜像安装成功之后,我们就可以全局使用vue-cli脚手架...
  • 在这里我们先快速的搭建一个vue的脚手架: (1).在安装vue的环境之前,安装NodeJS环境是必须的。可以使用node -v指令检查,需要保证安装了4.0版本以上的nodeJS环境。 没有安装的话,去Node.js的官网下载一下,各种...
  • vue框架搭建(移动端-crm7slyun项目)

    千次阅读 2018-08-20 21:04:31
    拉取git已建好的项目名,在本地使用vue-cli初始化项目,按网上教程即可 三.css处理方式(scss) 使用scss方式处理css,首先安装scss:执行 npm install node-sass sass-loader --save-dev 在vue的style标签中加入...
  • 框架Vue 插件:Vue-Router UI组件:element-ui 开发工具:WebStorm 2018.3 前端项目工程结构概览: 2、系统界面 由于之前给南宁那边公司开发的教务系统有商业协议,不能抽取它的前端程序出来用,而我有...
  • vue1.0框架搭建

    2019-10-15 15:52:52
    vue1.0框架搭建 学习网站地址 参考vue2.0官网初学者学习地址:https://cn.vuejs.org/ 安装软件 兼容性 Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript...
  • vue框架搭建

    2019-11-02 20:06:32
    一、 前期准备 检查是否安装vue-cli (打开windows PowerShell或者运行中的cmd) vue -V(V大写) 如果安装会显示安装的版本号,如下所示...二、搭建过程 1、将路径调整到自己要安装的目录下面 cd E:\IdeaProje...
  • Vue初识之框架搭建

    2021-06-24 14:09:35
    一、简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。...二、框架搭建 创建之前需要安装 Node.js 和npm yarn 这俩个环境 1.安装 nodejs 命令:yarn global add @vue/cli ...
  • 搭建vue框架

    2020-12-17 10:53:32
    安装完成之后打开cmd node -v npm -v 安装vue npm install -g cnpm --registry=https://registry.npm.taobao.org 安装vue-cli脚手架 cnpm install --global vue-cli global 表示全局安装,否则会安装到你当前的目录...
  • 在网上查了很多资料才发现原来是node版本过低的问题,虽然没有找到官方对这个“过低”问题的解释,但是根据国外网友的经验之谈,应该是至少使用node6,我将node4更新至node8之后确实没有报错了,顺利搭建。...
  • Vue框架项目实战整理:2、Vue环境搭建(有图有真相) Vue框架项目实战整理:3、Vue项目执行流程分析(一) Vue框架项目实战整理:4、Vue项目执行流程分析(二) 文章目录 1、安装 brew 2、安装 n...
  • 框架是基于vue-cli3搭建的,首先你需要安装vue-cli脚手架。 查看你的版本 vue -V 创建你的项目(admin为项目称) vue create admin 然后安装你的各种负载,这里不进行详细说明 我的package.json...
  •    最近小编在工作过程中经历了项目的前后端框架搭建和项目前端、后端的打包部署,个人觉得还是挺重要的,所以总结一下。本篇博客主要介绍一下后端项目框架的搭建(并非权威,可能有错漏,欢迎指正!不胜感激!) ...
  • Vue.js 是一套构建用户界面的渐进式框架搭建前期首先系统需要安装Node.js,npm(Node.js打包工具),Git代码管理工具。Node.js与Git安装可以参考这篇博客Node.js启程之旅(一)之安装和检查,npm会跟随Node.js...
  • 本文章,主要提供vue移动端项目基础框架搭建思路,每个独立的模块网上有很多相关的文档。 移动端vue项目基础框架搭建,主要包括6个步骤 1、项目使用的脚手架vue-cli搭建模板,2、使用淘宝lib-flexible搭配rem实现...
  • vue.js框架搭建具体步骤如下:1.安装node 到官网下载安装。 (中)https://nodejs.org/zh-cn/ (英)https://nodejs.org/en/2.安装cnpm镜像 (node自带安装了npm,故不再安装)$ npm install -g cnpm --registry...
  • Vue框架

    千次阅读 多人点赞 2021-06-30 20:28:40
    Vue 扩展插件2 Vue 的基本使用2.1开发者工具调试Vue.js devtools_3.1.2_02.2 框架使用方式2.3 框架使用2.4 Vue数据单向传递2.4.1 MVVM模型2.4.2 Vue中的MVVM的划分2.4.3 Vue中数据的单向传递2.5 Vue数据双向绑定3 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,893
精华内容 5,557
关键字:

vue框架搭建完成

vue 订阅