精华内容
下载资源
问答
  • 如何快速搭建vue前端框架: a、我们是在node环境下开发,借助webpack打包工具,安装vue-cli; npm install -g vue-cli b、安装完之后就可以用vue命令了: vue init webpack projectName //注意:projectName...

    如何快速搭建vue前端框架:

    a、我们是在node环境下开发,借助webpack打包工具,安装vue-cli;

      npm install -g vue-cli
    

    b、安装完之后就可以用vue命令了:

    vue init webpack projectName   //注意:projectName 为全小写英文
    
    •  

    c、创建之后进入目录安装依赖:

        如果安装速度太慢。可以安装淘宝镜像,打开命令行工具,输入:
    npm install -g cnpm --registry=https://registry.npm.taobao.org

    cd projectName
    npm install
    
    •  

    网速慢的话可以使用yarn来安装,yarn一次性安装好,不用再次安装依赖,进入项目目录可直接运行,下面就是我用yarn安装之后的效果

    使用npm init webpack 创建项目:
    在这里插入图片描述

    在这里插入图片描述

    进入目录启动项目:
    在这里插入图片描述

    启动后的效果图:
    在这里插入图片描述

    再看一下配置文件中,webpack已经安装好,按需配置就好
    在这里插入图片描述

    然后安装axiso:

    yarn add axios --save-dev 
    或者 npm install axios --save-dev
    
    •  

    在这里插入图片描述

    在这里插入图片描述

    安装好之后在index.js中引入axios,将axios放到原型链上面,方便后面调用:this.$axios.get()


    在这里插入图片描述

    然后安装vuex   ,   我这里用的是npm install vuex --save-dev

    yarn add vuex --save-dev
    
    •  

    在这里插入图片描述

    安装好之后在 src 目录下创建store文件夹,在文件夹中创建store.js文件,在文件中引入vuex,现在变可以开发了。

    我的安装了校验,双引号改成单引号,最后留空一行,不然报错
    在这里插入图片描述

    在这里插入图片描述

    技术是一个不断积累的过程,还有其他开发的技巧,慢慢来。

     

    来源:https://blog.csdn.net/weixin_43260760/article/details/84228024?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

     

    补充:

     

    如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config里的index.js

    还有,如果本地调试项目时,建议将build 里的assetsPublicPath的路径前缀修改为 ' ./ '(开始是 ' / '),因为打包之后,外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。
    我的端口没有被占用,直接成功(服务启动成功后浏览器会默认打开一个“欢迎页面”):


    注意:在进行vue页面调试时,建议下载一个vue-tool扩展程序。

    打包上线

    注意,自己的项目文件都需要放到 src 文件夹下。
    在项目开发完成之后,可以输入 npm run build 来进行打包工作。

     

    npm run build
    

    另:

     

    1.npm 开启了npm run dev以后怎么退出或关闭?
    ctrl+c
    2.--save-dev
    自动把模块和版本号添加到模块配置文件package.json中的依赖里devdependencies部分
    3. --save-dev 与 --save 的区别
    --save     安装包信息将加入到dependencies(生产阶段的依赖)
    --save-dev 安装包信息将加入到devDependencies(开发阶段的依赖),所以开发阶段一般使用它
    

    打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看。
    项目上线时,只需要将 dist 文件夹放到服务器就行了。

     

     

     

     

     

     

     

     

     

     

    展开全文
  • VUE+ELEMENT 搭建前端框架模板

    千次阅读 2019-06-29 16:46:07
    VUE+ELEMENT 搭建的一个前端框架通用模板,集成了日常开发中需要的一些功能示例,以及权限组件,RSA,DES,AES,SHA,MD5等加解密方法 https://github.com/K-walker/vue-web-frame.git ...

    VUE+ELEMENT 搭建的一个前端框架通用模板,集成了日常开发中需要的一些功能示例,以及权限组件,RSA,DES,AES,SHA,MD5等加解密方法

    https://github.com/K-walker/vue-web-frame.git

    展开全文
  • 搭建vue前端框架或微信小程序vue框架步骤 1.下载node.js 下载地址:https://nodejs.org/en/download/ 查看node、npm版本,确保环境正确 node --version npm --version 2.安装vue脚手架工具vue-cli 若开发工具为...

    搭建vue前端框架或微信小程序vue框架步骤

    1.下载node.js
    下载地址:https://nodejs.org/en/download/
    查看node、npm版本,确保环境正确

    node --version
    npm --version
    

    2.安装vue脚手架工具vue-cli
    若开发工具为IntelliJ IIDEA,创建项目步骤为create new project -> static web;
    若开发工具为Visual Studio Code,则OPEN Floder -> 可为本地空文件夹名。
    确保Terminal中指向位置为正确位置,执行
    npm install -g @vue/cli-init

    3.初始化结构
    vue init webpack happyHealth
    根据安装步骤提示与项目具体情况进行选择
    在这里插入图片描述
    4.安装插件与运行
    执行cd happyHealth或者通过工具打开happyHealth文件夹

    cd happyHealth
    npm install
    

    可在index.js文件中更改端口号
    在这里插入图片描述

    npm run dev
    

    执行启动代码,待启动成功,浏览器打开默认页面
    在这里插入图片描述

    PS:
    若要使用VUE搭建微信小程序前端框架,可借助美团点评的mpvue框架,如上步骤,在项目初始化结构时,更换执行如下命令,其余步骤雷同

    vue init mpvue/mpvue-quickstart happyHealth
    
    展开全文
  • vue搭建前端项目

    千次阅读 2018-07-10 15:28:53
    于是跟着vue群的大佬开始学习,他远程帮我搭建第一个简单的项目网站,我一遍学习一边记录,在这简单记录一下知识点。0:大家可以跟着官网搭建出网站的雏形。然后来看看目录结构,由于学vue时间不长,现在只是主要在...

        初学vue,刚开始跟着某教程学习了一段时间,发现只会引入vue.js,然后使用一下v-for之类的。一些逻辑还是离不开js。这绝对不是我想要的。于是跟着vue群的大佬开始学习,他远程帮我搭建第一个简单的项目网站,我一遍学习一边记录,在这简单记录一下知识点。

    0:大家可以跟着官网搭建出网站的雏形。然后来看看目录结构,由于学vue时间不长,现在只是主要在src里面进行操作。。


    1  : main.js收所有文件的入口,用来配置全局变量,引入所有需要的框架、框架需要提交安装好的。

        例如安装echarts。命令为:npm install echarts --save


    2:App.vue是主组件,一般不谢代码,配置路由的话,写router-view即可


    3:在components目录中放.vue页面。


    4:router/index.js中是配置的路由,先引入后进行配置路径与对应的页面,这里使用了子路由:rediect是设置了默认路径


    5:需要添加一个页面时:

        (1):在components中增加一个vue文件

        (2):在router中进行引入并配置路径

    6:使用ajax调用假数据的时候遇到的问题,报错路径不正确,请教大神后明白是因为接口的问题,于是mock模拟了接口后成功。mock目录以及index.js内容如下:


    7:对于页面之间跳转,使用路由的方法:

            this.$router.push({path:urls, query: { id: thisId, option: ""}});    //url是路径,后面是参数。

    8:剩下的各种坑,就是对vue的不熟练了。希望大家可以学到

    展开全文
  • 前端时间公司要求我接手一个老项目,要从头开始写,一开始我觉得还ok啊vue-cli直接搭一个直接写。 但是后来老大要求说要自己搭框架。当时我的脑子里只有vue-cli!老大说要满足和另一个模块一样的,可以自行配置内网...
  • 当前使用前后端分离框架实施的项目...本文使用VUE+Webpack搭建前端项目,UI框架选用ElementUI技术,当然也可以选用其他成熟的UI框架。 安装NodeJS 从中文NodeJS站点下载 http://nodejs.cn/download/ 或者从云盘下载...
  • Vue+Iview前端框架搭建

    千次阅读 2019-07-04 18:25:13
    Vue+Iview前端框架搭建前端搭建插件介绍引入到项目 前端搭建 Vue+Iview前端框架需要的插件 插件介绍 Vue,Iview,常用的v-charts Vue.js , 点我到官网.笔者用的2.5.17; Iview , 点我到官网.最新版即可; ...
  • https://blog.csdn.net/fungleo/article/details/77575077
  • 后端初学者如何快速使用Vue搭建前端环境引言使用Vue+静态模板进行前端搭建前后端分离? 引言 对于一个后端初学者来说,如何快速的搭建一个前端环境是一个难题,毕竟后端Java中也有非常多的知识等着我们学习。Vue这个...
  • VUE前端框架搭建

    2020-12-26 18:35:19
    npm i -g vue-cli, vue init webpack 运行:npm run dev
  • Vue3.0 项目搭建,开箱即用 Vue-router + Vuex + axios + eslint + element + less 框架包含:常用css类、js公用函数、本地缓存操作、常用正则表达式
  • 如何快速搭建vue前端框架: a、我们是在node环境下开发,借助webpack打包工具,安装vue-cli; npm install -g vue-cli b、安装完之后就可以用vue命令了: vue init webpack projectName //注意:projectName 为全...
  • ui-vue前端UI框架,基于vue2开发
  • SpringBoot框架搭建 初始化搭建 ① file->new->project->spring Initializr ②next-> (修改name为自己想要的名字name) (我之前有个模就直接创建了,没有模型的) Web 选个 web TemPlateEngines ...
  • 公司一直用 vue-element-admin 集成的前端框架,但是其实要贴合本身的业务也需要一些修改,作为刚入行的我,确实也很痛苦,最近项目我师父牛哥让我有空写一个前端框架,以后可以一直用,所以我参考了一部分 vue-...
  • 前端技术文档含JEECG前端框架环境搭建一、前端环境安装1. 安装nodejs2. Yarn安装3. 配置nodejs镜像4. 安装脚手架vue-cli5. 最后验证是否安装成功二、geecg前端项目介绍1.学习必看的资料2.前端框架介绍(一)前端的...
  • Vue项目-前端框架

    2018-07-18 10:03:48
    使用vue-cli搭建一个前端框架,要使用到node.js的相关知识,具体的操作步骤,可以参考我的博客
  • 前端Vue项目框架搭建

    2020-12-14 13:23:46
    前端Vue项目框架搭建Vue项目搭建方式vue uivue create Vue项目搭建方式 vue项目搭建通过vue脚手架主要有两种方式:图形界面的vue ui 以及命令行形式的vue create。 vue ui 选择任意文件夹作为项目框架路径(注意:...
  • 本文给大家介绍了vue2.x、webpack、vuex、sass+axios、elementUI等快速搭建前端项目框架的详细操作方法,需要的跟着学习下吧。
  • 搭建前端VUE框架 npm install -g vue-cli--------------------安装脚手架 npm install -g webpack-----------------安装打包工具 vue init webpack 文件夹名字----------初始化一个vue项目 npm install------------...
  • 前端开发工具有许多,当下流行的sublime等等都是前端比较受欢迎的,nodeJS和Vue等都是前端框架搭建流行的一套 安装nodeJS 设置环境变量 安装Visual Studio Code 运行项目文件 2.如何安装nodeJS和环境配置 ...
  • vue前端UI框架整理

    千次阅读 2019-07-05 11:15:48
    整理的vue前端UI框架。 PC端: 1、Elementi:一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。 2、iView:一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。 3、vue-strap:...
  • vue 前端框架 目录

    2018-06-28 11:15:00
    vue 前端框架 目录 vue-目录 ES6基础语法 vue基础语法 Vue.js的组件化思想 —上 Vue.js的组件化思想 —下 Vue + Vue-Router结合开发 SublimeServer插件安装和使用 Vue...
  • Vue搭建前端

    2021-02-04 09:19:22
    最近公司来了个项目,运行起来后,控制台报错,说是找不到“XXXXX”模块,让检查...接下来,微前端搭建摸索正式开启: 首先放上官网文档地址、配置文件生成说明 一、涉及技术及框架 single-spa:连接主项目与子.
  • vue.js框架搭建具体步骤如下:1.安装node 到官网下载安装。 (中)https://nodejs.org/zh-cn/ (英)https://nodejs.org/en/2.安装cnpm镜像 (node自带安装了npm,故不再安装)$ npm install -g cnpm --registry...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,268
精华内容 8,107
关键字:

vue搭建前端框架

vue 订阅