精华内容
下载资源
问答
  • Vue安装到精通 项目实战(2021最新!)

    千次阅读 多人点赞 2021-04-13 21:54:55
    Vue框架Vue概念 Vue概念 JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。近年来发展非常迅速,标准也在不断完善已经达到ES6时代。 ECMAScript 6.0(简称 ES6)是...

    Vue概念

    JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。近年来发展非常迅速,标准也在不断完善已经达到ES6时代。

    ECMAScript 6.0(简称 ES6)是JavaScript语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标是让JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言,洗白其一直被“鄙视”的脚本语言的前身。
    在这里插入图片描述

    随着js的强大,三大巨头横空推出,形成鼎足之势。前端新三大框架:Angular/React/Vue,三种是目前主流js框架。Angular全面,项目代码多;Vue轻便,针对性解决问题,拿来就用,开发存在局限性。新手可以从vue上手,再去了解react和angular。

    Vue是我们国人开发,作者:尤雨溪,是一个基于JavaScript的渐进式前端框架,更符合中国人习惯,在中国很多大型一线企业中广泛应用。Vue3.0使用TypeScript,TypeScript是JavaScript的超集,微软研发,语法更加细致严谨,改js脚本语言为向一线强语言java、c靠拢,可以构建大型项目,基于ES6标准。

    渐进式框架

    在这里插入图片描述
    Vue是一个用于构建用户界面的渐进式SPA单一页面框架。与其他庞大而单一框架不同的是,Vue从一开始就被设计为可逐步采用。

    • 可以只使用vue.js
    • 可以只使用vue.js + components组件
    • 可以只使用vue.js + components组件 + router路由
    • 可以只使用vue.js + components组件 + router路由 + vuex状态管理
    • 构建大型vue项目:npm(包依赖) + webpack(打包、压缩、合并等)

    Vue安装

    安装配置npm

    验证node.js 安装:

    dos命令提示符下执行(有版本号即安装成功):

    node安装(v8.11.3,至少8以上)

    node -v	
    

    npm安装(v5.6.0)

    npm -v
    

    参考博客:https://blog.csdn.net/weixin_53601359/article/details/115680033


    安装 cnpm

    cnpm是一个完整 npmjs.org 镜像,可以用此代替nodejs.org官方版本,同步频率目前为10分钟一次,以保证尽量与官方服务同步。(目的为了提高访问、下载速度)

    查看当前配置的镜像源

    npm config get registry

    执行结果:

    https://registry.npmjs.org/
    或者
    https://registry.npm.taobao.org/

    npm切换到淘宝镜像方式(提高下载速度):

    npm config set registry https://registry.npm.taobao.org

    直接使用淘宝镜像命令方式:

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

    cnpm版本,有版本号即安装成功(直接支持cnpm命令,和npm一样只是库不同)

    cnpm –v


    脚手架安装

    vue-cli 脚手架工具安装与配置(需要几分钟)

    npm install vue-cli -g #安装vue-cli脚手架
    npm uninstall vue-cli -g #卸载vue-cli脚手架

    查看版本(有版本号即安装成功):

    vue --version # 2.9.6
    vue -V

    生成vue 项目

    指定文件下开启cmd,project为自定义项目名称,不可使用大写

    vue init webpack project
    在这里插入图片描述
    在这里插入图片描述
    安装成功:

    在这里插入图片描述

    To get started:
    cd project 进入项目
    npm run dev 启动服务,ctrl+c停止

    在这里插入图片描述
    注意:端口号可能不同,默认为8080,如果发现端口占用npm会自动改变端口号,具体 以当前环境为准。
    在这里插入图片描述

    Vue目录结构

    这个目录结构非常重要。就如你要生孩子去妇幼保健院,你要游泳去游泳馆。规定好每个目录的作用,方式和位置就约定统一了。有了这套规则,文件就不会乱放,这样找资源时就知道到哪里找,写代码文件时就按功能放到指定的目录中。这种方式已经非常常见,如Maven构建项目目录有强制的约定,如Spring框架中约定大于配置。

    • src 目录是一个很大的目录,包罗万象
    • components 把项目中所需要的组件都放在此目录下,默认会创建一个HelloWorld.vue,我们可以自己添加,如添加Header.vue
    • router 访问的路径,Vue提倡的是SPA(Single Page WebApplication)单页面设计,这是以前旧页面中如果包含其他资源,必然涉及到路径问题。Html没有很好的解决这个问题,而router它是一种解决路径的新发明,很好的解决了多模块页面刷新问题。简而言之就是给组件指明一个路径,我们怎么去访问它。不同组件是依靠配置的路径router来访问的。router非常强大,老系统是URL改变是在服务端进行刷新,而router支持在客户端刷新,就是URL变化,页面内容变化,但不请求服务器端,以前的程序是做不到的。
    • view 就是用户要访问的页面都存放在这个目录下,如Index.vue
    • static中保存一些静态的资源,如jquery、css、图片等

    • package.json 各组件版本,特别启动的参数
      在这里插入图片描述
    • build/webpack.dev.config.js 核心默认配置文件,启动的配置参数在这里插入图片描述
    • build/webpack.base.conf.js 基础配置文件
      在这里插入图片描述
    • index.html 首页,Vue是SPA单页面开发,页面入口,定义div#app
    • src/main.js 公共的组件就直接配置到这个文件中,私有的就配置到view中
      在这里插入图片描述
    • src/App.vue 根组件
      在这里插入图片描述
    • src/router/index.js 引入子组件HellWorld.vue
      在这里插入图片描述

    调用关系图

    在这里插入图片描述
    简单来说项目加载的过程是:

    index.html -> main.js -> App.vue -> index.js -> HelloWorld.vue

    可以看到Vue项目是自有一套规则,一套机制的,非常系统化的。有固定的文件,有自定义的文件,各自放在指定的目录下,指定的文件中,指定的地方,最终来实现用户的需求。那在开发之前,你就必须了解这套机制,写代码的时候就规则清晰,如有神助,知道该如果写代码,知道为什么这么写,代码文件该放在哪,它们是谁调用谁,互相怎么调用的了。

    MVVM概念

    和传统框架不同,Vue采用了最新的MVVM框架,它最大的特点就是,传统js机制操作的是页面,像html+css+js项目,大家会发现页面和页面里的数据混杂在一起。

    而MVVM框架体系引入后端早已深入人心的分层思想,是后端MVC框架的延伸,实现把数据和页面分离。我们可以在页面布局好后,只对数据进行操作,当数据改变,页面上的内容会自动随之改变,而无需开发者开发专门的代码去改变,如之前ajax技术实现的局部刷新。

    简而言之,MVVM框架实现了页面和数据的分离,代码结构更加清晰,责任更加明确,同时实现自动化,数据变化,页面随之变化,无需写代码,非常棒的一个改进。这是javascript、jquery、bootstrap等无法做到的,也是前端为何开始推崇Vue这些框架的根本原因,也标示着jquery的终结。
    在这里插入图片描述

    特点

    • 一个轻量级的mvvm框架,双向绑定,数据动态更新,gzip后大小只有20k+
    • 其核心思想是数据驱动、组件化的前端开发
    • 原生html页面操作的是dom,而vue.js操作的是数据,从而屏蔽了复杂晦涩难懂的dom结构。和传统前端开发开发的关注点完全不同,传统方式关注的是都像的document结构的api,而vue关注的是组件,是数据,也更加符合面向对象的方式

    MVC和MVVM框架区别

    在这里插入图片描述
    MVC全名是Model-View-Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。
    在这里插入图片描述
    MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM就是将其中View的状态和行为抽象化,让我们将视图UI和业务逻辑分开。当然这些事 ViewModel已经帮我们做了,它可以取出Model的数据同时帮忙处理View中由于需要展示内容而涉及的业务逻辑。

    项目分析:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
        <script src="js/vue.js" type="text/javascript"></script>
    	</head>
    
    	<body>
          <div id="app">
            <p>{{message}}</p>
          </div>
    	</body>
    
      <script>
        new Vue({
          el : '#app',
          data :  {
            message: "Hello Vue."
          }
        })
      </script>
    </html>
    

    创建Vue匿名对象,直接参数就是一个对象,一个类似json格式的js对象,这样的代码结构更加简洁。

    Vue对象的参数:

    • el: 绑定到指定名称的html标签上
    • data: 绑定的数据,相当于给html中使用的时候所传的值

    Vue生命周期 lifecycle

    使用vue做项目时,我们需要了解vue对象的生命周期和生命周期函数(Vue 实例从创建到销毁的过程),这样才能知道哪些事情应该在哪个函数里做。

    如页面创建时,页面加载时,页面更新时,页面销毁时?

    在这过程中,我们在每个特定阶段会触发一些方法(这些方法具备一些功能),我们给这些方法起了名字叫做生命周期钩子函数/组件钩子。

    生命周期函数:

    • vue实例在某一个时间点会自动执行这些函数;
    • 生命周期钩子函数不允许写成箭头函数;
      可以分为3个阶段,一共8个钩子:初始化阶段(创建前/后, 载入前/后),运行中(更新前/后),销毁(销毁前/销毁后)

    细分每个过程:

    默认值取值范围
    new Vue创建vue实例
    init events & lifecycle开始初始化
    beforeCreate组件刚被创建,组件属于计算之前,如data属性等
    init injections & reactivity通过依赖注入导入依赖项
    created组件实例创建完成,属性已绑定,此时DOM还未生成
    el 属性检查vue配置,即new Vue()里面的el项是否存在,有就继续检查template项。没有则等到手动绑定调用v.$mount()
    template检查配置中的template项,如果没有,则被绑定区域的el对象的outHTML(即整个#app DOM ,包括
    标签)都作为被填充对象替换掉填充区域
    beforeMount模板编译、挂载之前
    create v$el and replace el编译、并替换了被绑定元素
    mounted编译、挂载
    befor update组件更新之前
    updated组件更新之后
    destroy当v.$destroy()被调用,开始拆卸组件和监听器,生命周期终结

    在这里插入图片描述

    组件化(Element-UI)

    概念

    组件 (Component) 是 Vue.js 最强大的功能之一。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。可以理解为组件是对HTML元素的扩展。它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树。
    在这里插入图片描述
    Element:一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。界面优美,浏览器兼容,事半功倍。
    在这里插入图片描述
    官网地址:

    https://element.eleme.cn/#/zh-CN #首页
    https://element.eleme.cn/#/zh-CN/component/layout #组件页
    https://unpkg.com/browse/element-ui@2.15.1/ 组件下载地址

    ElementUI 安装

    在Vue项目目录下运行CMD
    npm i element-ui -D

    将element-ui文件放到rc目录下:
    包含:js脚本、css样式文件、.ttf、.woff字体文件
    在这里插入图片描述

    拓展:观察者设计模式

    设计模式是最精髓的东西,是软件思想的体现,是软件的灵魂。如三大框架SSM只所以傲视群雄,它的傲娇就来自对经典设计模式的应用。所以如果只会应用不懂其义,那你只是个码农;如何能领会设计模式的奥义,你就有了高级程序员的潜力;如果你能自己仿写,你就有了架构师的入门证。

    Vue这类为何称之为框架,就是其不是简单的编程,而是应用了经典的设计模式,那它应用了什么什么模式呢?它应用了“观察者设计模式”。

    那什么是观察者设计模式呢?

    观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个目标对象,当这个目标对象的状态发生变化时,会通知所有观察者对象,使它们能够自动更新。
    在这里插入图片描述

    • 页面data中的address就是数据
    • get为获取当前数据,set为设置数据新值
    • 观察者watcher就为那多个插值表达式和input文本框,在页面加载时这些关系进行双向绑定
    • 当我们让数据变化时,如input文本框修改内容,其就调用数据的set的方法,把数据进行更新,其更新就被vue框架通知notify众多的观察者。如众多的插值表达式就会触发trigger,进行再次渲染re-render,修改虚拟dom树。最终vue框架局部宣传页面
    • 同样,当我们利用谷歌浏览器改变数据v.address赋值时,就调用数据的setter方法进行数据更新,数据更新后,通知众多的观察者,观察者更新如上面的流程

    可以看出Vue设计非常巧妙,我们页面展现的数据,必然会涉及到数据的读写,于是Vue实现了一整套机制,这套机制监控数据的获取(get),数据的更新(set),这样当数据变化,Vue就能知道。它知道有什么用呢?它就能控制当数据变化时就能重新进行页面的渲染,从而用户看到页面展现新的内容。

    总结

    可以看到Vue这类为何称为框架,名副其实,当之无愧。写javaScript时,我们要先去学习其复杂的api(document.getElementById()),写jQuery时,又学一套复杂的api(一堆的选择器),特别它的写法虽然简洁,却晦涩难懂,需要死记大量英文单词,初学者极易写错,门槛很高,就现在很多企业的程序员依然被绊倒,说不明白,讲不清楚,使用中bug满天飞,一堆糊涂虫。

    展开全文
  • vue 安装 echarts

    千次阅读 2020-08-17 17:03:41
    首先安装的命令行是 cnpm install echarts -S (记得安装完了依赖要引入到 package.json) 然后把他挂在main.js里面,然后就可以变成全局的了,就不需要在局部引进echarts了 接下来就可以正常使用了 第一步:...

    首先安装的命令行是 cnpm install echarts -S (记得安装完了依赖要引入到 package.json)

    然后把他挂在main.js里面,然后就可以变成全局的了,就不需要在局部引进echarts了

    接下来就可以正常使用了

    第一步:

    第二步:

    第三步:

    展开全文
  • 1.使用nodejs安装vue 安装完成node,node有自带的npm,可以直接在cmd中,找到nodeJs安装的路径下,进行命令行全局安装vue-cli。(npm install--global vue-cli) 2.检查是否安装成功 3.创建一个空的文件 4...

    1.使用nodejs安装vue

    安装完成node,node有自带的npm,可以直接在cmd中,找到nodeJs安装的路径下,进行命令行全局安装vue-cli。(npm install--global vue-cli)

    2.检查是否安装成功

    3.创建一个空的文件

    4.如下选择,生成vue-test文件夹

    例:生成vue-test目录结构如下图:

    5.安装node_modules模块,进入vue-test文件夹 npm install

    生成node_modules模块

    6.执行npm run dev

    复制地址在浏览器就会打开如下页面,如果想下次运行自动打开浏览器的话,需要在 config/index.js里设置  autoOpenBrowser: true,下次运行就会自动打开浏览器

    (备注:如果已经有vue文档,只需进行5、6步即可)

    展开全文
  • Vue安装及环境配置、开发工具

    万次阅读 多人点赞 2020-09-29 17:06:08
    vue安装环境搭建 提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录vue安装环境搭建前言一、node.js安装和配置1. 下载安装node.js2. 配置默认安装目录和缓存日志目录3. node.js环境配置4...
     本文主要介绍了Vue的安装及环境配置,新建vue项目,简单介绍vue开发工具和项目结构。  
    


    前言

    vue前端框架的环境搭建


    一、node.js安装和配置

    1. 下载安装node.js

    官网下载最新版本:https://nodejs.org/en/download/
    可以下载安装包(安装教程见:https://www.runoob.com/nodejs/nodejs-install-setup.html
    或者下载zip文件找个目录保存,解压下载的文件,然后配置环境变量,将解压文件所在的路径配置到环境变量中。
    在这里插入图片描述
    由于Node.js 中默认安装了 npm,所以不用额外配置就能在全局命令中使用 npm命令,在cmd中测试一下是否安装成功了:输入 node -v 与 npm –v分别查看版本信息
    在这里插入图片描述

    2. 配置默认安装目录和缓存日志目录

    说明:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间,当然如果你不介意,可以省略这一设置
    1、创建默认安装目录和缓存日志目录
    比如,我希望将全模块所在路径和缓存路径,放在我node.js安装的文件夹中,则在我安装的文件夹【"D:\Program Files \nodejs】下创建两个文件夹【node_global】及【node_cache】分别作为默认安装目录和缓存日志目录。

    在这里插入图片描述
    2、执行命令,将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录:

    npm config set prefix "D:\Program Files\nodejs\node_global"
    npm config set cache "D:\Program Files\nodejs\node_cache"
    

    npm config get prefix查看npm全局安装包保存路径
    npm config get cache查看npm装包缓存路径

    还可以输入npm list -global命令来查看全局安装目录:


    npm config list查看所有npm 配置

    3. node.js环境配置

    说明:以下D:\Program Files\nodejs为我的node的安装路径,记得改成你们自己的路径

    “我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”,进入环境变量对话框

    1、【系统变量】下新建【NODE_PATH】,输入
    【D:\Program Files\nodejs\node_global\node_modules 】
    在这里插入图片描述
    2、【系统变量】下的【Path】添加上node的路径【D:\Program Files\nodejs\】

    3、【用户变量】下的【Path】添加上
    【D:\Program Files\nodejs\node_global】,【D:\Program Files\nodejs\node_cache】,这是nodejs默认的模块调用路径

    在这里插入图片描述

    4. 配置淘宝镜像源

    查看npm下载源 npm config get registry

    将npm的模块下载仓库从默认的国外站点改为国内的站点,这样下载模块的速度才能比较快,现在用的都是淘宝镜像源(https://registry.npm.taobao.org),使用淘宝镜像源有两种方式:

    (1)临时使用

    npm --registry https://registry.npm.taobao.org install cluster
    

    这个代码就是只在安装cluster的使用淘宝镜像下载,每次安装一个模块都用挺长的代码,比较繁琐,所以推荐第二种方式。

    (2)永久使用

    这里有也两种配置选择,一是直接修改npm命令的仓库地址为淘宝镜像源,另一种是安装cnpm命令。

    第一种:直接修改npm的默认配置

    npm config set registry https://registry.npm.taobao.org 
    

    验证:配置后可以根据 npm config get registrynpm config list 命令查看npm下载源是否配置成功,如图所示配置前为"https://registry.npmjs.org/"
    在这里插入图片描述

    配置后为淘宝镜像,表示配置成功

    在这里插入图片描述
    第二种:安装cnpm

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

    验证方式变成了cnpm config get registrycnpm config list如图所示

    在这里插入图片描述


    二、安装vue及脚手架

    1.安装vue.js

    npm install vue -g或者cnpm install vue -g

    根据自己的淘宝镜像源设置选择命令,其中-g是全局安装,指安装到global全局目录去

    在这里插入图片描述
    查看安装的vue信息:npm info vue 或者cnpm info vue

    在这里插入图片描述
    查看安装的vue版本npm list vue
    在这里插入图片描述

    2.安装webpack模板

    在命令行中运行命令 npm install webpack -g ,然后等待安装完成。

    webpack 4x以上,webpack将命令相关的内容都放到了webpack-cli,
    所以还需要安装webpack-cli:npm install --global webpack-cli
    安装成功后可使用webpack -v查看版本号。

    3.安装脚手架vue-cli 2.x

    npm install vue-cli -g
    

    用这个命令来检查其版本是否正确:vue --versionvue -V
    在这里插入图片描述

    这里顺手安装上vue-router

    npm install -g vue-router
    

    可以看到我的安装目录如下
    在这里插入图片描述

    4.vue-cli2创建vue项目

    1、创建项目(最好在cd到D盘的某个位置,即项目的路径,否则项目会新建在C:\Users\Administrator\,也可以直接在想要的项目路径下输入cmd)

     vue init webpack 项目名
    

    项目名不要取中文和大写字母。

    进行一些配置:

    • Project name(工程名):回车(含大写字母给我报错了,我给改了my-vue)
    • Project description(工程介绍):回车
    • Author:作者名 :回车
    • Vue build ==> (是否安装编译器)runtime-compiler、 runtime-only 都是打包方式,第二个效率更高;
    • Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到路由,所以Y 回车;
    • Use ESLint to lint your code ==> 是否需要ESLint检测代码,目前我们不需要所以 n 回车;
    • Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;
    • Setup e2e tests with Nightwatch ==>是否需要端到端测试工具目前我们不需要所以n回车;
    • Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)==> 安装依赖npm install
    • 回车;

    在这里插入图片描述
    此处省略了一部分截图
    最后结果如下,项目初始化成功
    在这里插入图片描述

    2、按提示代码进入到项目目录下并运行npm run dev
    在这里插入图片描述
    按提示打开地址http://localhost:8081, 打开网址如图所示
    在这里插入图片描述

    结束项目运行:ctrl+c,选择Y即可停止项目的运行。


    三、安装vue-cli 3.x

    1、卸载旧版本

    卸载2.x版本 npm uninstall vue-cli -g
    卸载3.x版本 npm uninstall @vue/cli -g

    2、安装新版本

    npm install @vue/cli –g
    指定版本号 npm install -g @vue/cli@3.12.1 不指定版本号会默认安装最新的版本
    在这里插入图片描述

    3、新建项目

    vue create 项目名

    在这里插入图片描述

    • Please pick a preset=》选择一个配置:default默认有babel、eslint,Manually select features 手动配置。
      选择手动配置,根据自己的需要选择,敲空格键配合方向键进行选择。
    • where do you prefer placing config for …=》配置放在哪里
      In dedicated config files =》 每项配置有单独的文件
      In package.json =》在package.json 文件中
    • Save this as a preset for future project? =>是否为保存配置习惯文件,存了后下次新建新项目选择配置时就会有此选项了
    • Save preset as; =>存个名字
    • Pick the package …=>运行选择npm或者yarn

    配置成功

    在这里插入图片描述

    4、运行项目

    cd 到我们的项目目录, 然后使用npm run serve可以运行我们的项目
    http://localhost:8080/ 打开就可以看到我们的运行的结果了,如图
    在这里插入图片描述

    五、cli3下拉取2.x模板

    npm install -g @vue/cli-init
    

    依然可以新建2.x的项目 vue init webpack my-vue

    四、开发工具

    1、用VS查看vue代码

    最好使用编码工具查看编写代码,我用的vs code ,安装见https://blog.csdn.net/dream_summer/article/details/108872293,下面讲如何使用Visual Studio Code查看vue代码
    1、在VS code 中启动项目
    创建完项目后,首先用VS打开项目所在的文件夹,点击工具栏的终端——新建终端,在下面的终端窗口命令行输入 npm run serve启动,编译成功后会自动打开浏览器
    在这里插入图片描述

    项目中新建vue.config.js 文件,更改端口号为8089

    module.exports={//扩展配置
        configureWebpack:{
            devServer:{
                port:8089,//更改端口号
                open:true,//自动启动浏览器
                //mock数据
                before(app){
                    
                }
            }
        }
    }
    

    保存后,在终端启动,端口号变为8089并自动打开了浏览器http://localhost:8089
    如图
    在这里插入图片描述
    在这里插入图片描述

    2、Hbuilder X

    1. 安装
      从HbuildX官网(http://www.dcloud.io/hbuilderx.html)下载hbuildx安装文件(已提供,无需下载),下载后,直接解压就可以使用。

    2. 新建VUE项目
      在这里插入图片描述

    3. Node配置(配置运行许可)
      选中新建的项目点击工具栏运行-运行到终端-运行设置
      填写最下面的npm、node运行配置,如下图:
      在这里插入图片描述

    4. 运行工程
      选中工程,点击右键-外部命令
      1、npm run build 编译该工程
      2、npm run serve 启动该工程
      启动成功之后,打开路径看到如下界面说明成功。
      在这里插入图片描述

    五、vue项目结构

    1、build:构建脚本目录
    1)build.js ==> 生产环境构建脚本;
    2)check-versions.js ==> 检查npm,node.js版本;
    3)utils.js ==> 构建相关工具方法;
    4)vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加 前缀;
    5)webpack.base.conf.js ==> webpack基本配置;
    6)webpack.dev.conf.js ==> webpack开发环境配置;
    7)webpack.prod.conf.js ==> webpack生产环境配置;
    2、config:项目配置
    1)dev.env.js ==> 开发环境变量;
    2)index.js ==> 项目配置文件;
    3)prod.env.js ==> 生产环境变量;
    3、node_modules:npm 加载的项目依赖模块
    4、src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
    1)assets:资源目录,放置一些图片或者公共js、公共css。但是因为它们属于代码目录下,所以可以用 webpack 来操作和处理。意思就是你可以使用一些预处理比如 Sass/SCSS 或者 Stylus。
    2)components:用来存放自定义组件的目录,目前里面会有一个示例组件。
    3)router:前端路由目录,我们需要配置的路由路径写在index.js里面;
    4)App.vue:根组件;这是 Vue 应用的根节点组件,往下看可以了解更多关注 Vue 组件的信息。
    5)main.js:应用的入口文件。主要是引入vue框架,根组件及路由设置,并且定义vue实例,即初始化 Vue 应用并且制定将应用挂载到index.html 文件中的哪个 HTML 元素上。通常还会做一些注册全局组件或者添额外的 Vue 库的操作。
    5、static:静态资源目录,如图片、字体等。不会被webpack构建
    6、index.html:首页入口文件,可以添加一些 meta 信息等。 这是应用的模板文件,Vue 应用会通过这个 HTML 页面来运行,也可以通过 lodash 这种模板语法在这个文件里插值。 注意:这个不是负责管理页面最终展示的模板,而是管理 Vue 应用之外的静态 HTML 文件,一般只有在用到一些高级功能的时候才会修改这个文件。
    7、package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息
    8、README.md:项目的说明文档,markdown 格式
    9、.xxxx文件:这些是一些配置文件,包括语法配置,git配置等

    1).babelrc:babel编译参数
    2).editorconfig:编辑器相关的配置,代码格式
    3).eslintignore : 配置需要或略的路径,一般build、config、dist、test等目录都会配置忽略
    4).eslintrc.js : 配置代码格式风格检查规则
    5).gitignore:git上传需要忽略的文件配置
    6).postcssrc.js :css转换工具

    六、我的vue 的系统学习笔记

    vue笔记一:Vue技术栈

    Vue笔记二:基础语法

    展开全文
  • Vue安装步骤(详细)

    千次阅读 2020-09-27 17:27:32
    有三种方法: 1. cdn 加速服务器,这种方式更加便捷,当项目部署以后, ...vue引入:https://cdn.staticfile.org/vue/2.6.12/vue.min.js // 引入网络资源 <script src="https://cdn.staticfile.org/vue/2.6.12/vue
  • vue安装最新版Vue或者指定版本

    千次阅读 2020-08-14 14:36:13
    3 安装最新的vue npm install -g vue-cli — 这个命令已经废弃了3.0以后 npm install -g @vue/cli 4 安装指定版本的vue npm install -g @vue/cli@版本号 例如 : npm install -g @vue/cli@3.11.0 5 卸载vue npm ...
  • Vue安装步骤及教程(详细)

    万次阅读 多人点赞 2019-12-13 15:26:37
    先从node官网下载并安装node.js,安装node.js的作用就是利用npm资源管理器下载插件等… ------把下载好的.exe文件双击安装,一直下一步就OK------------- 1.安装好的node试一下查看是不是安装成功,window键+r输入cmd...
  • 最详细的vue安装教程

    万次阅读 多人点赞 2019-05-05 09:22:29
    vue.js使用(前后端分离) 1:安装node.js 环境 (1)下载对应你系统的Node.js版本:https://nodejs.org/en/download/ (2)安装 安装完成后验证node.js 是否安装成功 查看node 版本,以及npm 若展示下图...
  • vue安装和nmp换镜像

    千次阅读 2021-03-27 21:13:35
    vue安装和nmp换镜像 首先检查nmp -v 和 node -v的版本号 安装指定版本npm install -g @vue/cli@3.11.0 查看默认镜像npm get registry 修改淘宝镜像npm config set registry http://registry.npm.taobao.org/ 换成...
  • vue 安装并导入 Element UI

    千次阅读 2020-10-05 12:49:36
    第一步安装Element UI 首先进入vue项目所在的cmd目录输入: npm i element-ui -S 配置main.js文件 在配置文件中加入这三句话,引入Element UI import ElementUI from ‘element-ui’; import ‘element-ui/lib/...
  • vue安装vuetify插件

    千次阅读 2019-06-28 23:18:57
    在已创建好的项目文件夹中输入vue add vuetify
  • VUE安装依赖命令总结

    千次阅读 2019-05-13 09:27:00
    1. vuex 作用:vue状态管理 安装:npm install vuex --save 开源地址:github 文档:https://vuex.vuejs.org/zh/ 2. vue-resource 作用:通过XMLHttpRequest或JSONP发起请求并处理响应 安装:npm install vue-...
  • vue安装之后找不到vue.cmd文件

    千次阅读 2019-11-15 01:46:13
    第二步:安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 第三步(最关键!) npm i npm -g npm i @vue/cli -g //如果还报错也没关系,继续执行下面的命令 cnpm i @...
  • win10上vue 安装、卸载、升级

    千次阅读 2020-05-31 11:02:14
    2、vue 安装 2.1、安装 node.js https://nodejs.org/en/download/ 下载完毕,按照windows一般应用程序,一路next就可以安装成功,建议不要安装在系统盘 2.2、设置global和cache路径 说明:设置路径能够...
  • Oracle AutoVue 安装与配置说明

    千次阅读 2018-02-08 07:08:55
    1 AutoVue简介AutoVue根据客户应用情况的不同,提供Desktop及Client-Server两种解决方案。其中Destop Edition主要基于单机用户应用,Client-Server Edition采取集中式管理方式,客户端无需安装客户程序,只需有支持...
  • vue安装插件指定版本

    千次阅读 2019-08-27 22:41:40
    安装插件指定版本 npm install vue-cli@2.9.6 --save 查看需要安装插件的版本记录 npm view vue-cli versions --json
  • VUE安装环境搭建--依赖项安装

    千次阅读 2018-12-12 15:23:32
    VUE安装环境搭建完成,运行后能显示vue的欢迎页,就可以开始进行开发了。 不过呢,在此之前,最好先安装一下相关的依赖项。vue的开发,尤其是单页面应用,一般推荐用 vue + vuex + vue-router + vue-resource 来...
  • Vue安装依赖 npm install 失败报错

    千次阅读 2020-04-26 15:49:24
    npm install 报错情况如下 情况一 报错**:errno:-4048;** The operation was rejected by your operation system的解决方法 原因:操作系统不允许 解决方法: ...用管理员权限打开node,再执行命令npm ...再安装...
  • vue安装和卸载

    千次阅读 2019-09-19 15:04:44
    查看版本 vue/cli --version 查看2.xx版本 npm view vue-cli versions --json vue init webpack vue2xx 查看3.xx以上版本 npm view @vue/cli versions --json vue create my-project ...安装指定版本(2.x...
  • npm i vue-echarts 安装 import ECharts from ‘vue-echarts/components/ECharts’ 引入 Vue.component(‘chart’, ECharts) 注册组件 在template中这样写 &amp;lt;chart :options=&quot;ying&...
  • vue安装echarts失败使用cdn引用

    千次阅读 2019-04-10 17:33:59
    vue安装echarts失败使用cdn引用echarts.js 正常状态安装echarts 安装 npm install echarts -S 或 先安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 再安装 cnpm install echarts -S ...
  • Vue安装ant-design-vue和ElementUI

    千次阅读 2018-10-18 02:40:13
    前提已经安装了git和node下 使用命令: ...安装ant-design-vue相关插件之后,然后在项目的核心文件引入相关的东西,在src目录下的main.js引入 import Antd from 'ant-design-vue' 复制代码 和 impor...
  • Vue安装style-loader失败 原因和解决方法 当前sass的版本太高,webpack编译时出现了错误,这个时候只需要换成低版本的就行,下面说一下修改方法,很简单,如下,找到package.json文件,里面的 "sass-loader"的版本...
  • vue安装jsx依赖包实现支持jsx语法

    千次阅读 2019-03-08 16:09:04
    1、首先安装依赖: npm install postcss-loader autoprefixer babel-loader babel-core 2、在 .babelrc文件中修改: 把 "presets": ["env", "stage-2"], "plugins"...
  • 1.初次安装使用 axios 发现提示 axios is not defined 2.以 axios 官方文档get请求为例子,发现运行时还是会报上述错误 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) ...
  • vue 安装教程

    千次阅读 2020-09-28 13:32:32
    下载node.js ... 检查nodejs版本 ...安装vue cnpm install vue 全局安装 vue-cli cnpm install --global vue-cli 以上代码运行一次即可 创建一个基于 webpack 模板的新项目 vue init webpack “相对路径/
  • vue 安装各种报错、警告相关问题

    千次阅读 2018-09-08 19:30:55
    这次也是,安装一个vue感觉我将可能出现的坑踩了个遍。 1.淘宝镜像安装vue出现警告 错误太多就不一一例举,直接上图 前4个警告是因为node.js的版本太低了,重新下载安装一个高版本的node.js即可,最后一个则是...
  • 4、electron-vue安装element-ui

    万次阅读 2018-03-14 21:19:31
    Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,它面向企业级的后台应用,能够帮助你快速地搭建网站,极大地减少研发的人力与时间成本,具体用法请参考Element UI yarn add element-ui // 或 cnpm ...
  • Vue安装教程 (一)

    千次阅读 2020-08-14 14:18:20
    1. 安装清单 node webpack vue vue-cli 2. Node安装 安装vue需要用到npm。 npm是node里面的包管理器,所以需要先安装好node才有npm。 3. Webpack安装 3. Vue安装 4. Vue-cli安装
  • vue安装依赖报serve: `vue-cli-service serve`

    万次阅读 多人点赞 2020-10-26 14:24:02
    问题 问题原因: 下载依赖的的仓库没有被授权或者自己设置的下载依赖地址不对,导致依赖下载不下来。 解决办法 1.删除项目中原有的依赖,将整个文件夹删掉:“node_modules ” 执行命令 ......

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 182,858
精华内容 73,143
关键字:

vue安装

vue 订阅