精华内容
下载资源
问答
  • Vue下载安装

    万次阅读 多人点赞 2018-08-28 15:37:30
    首先安装node.js环境: node.js安装推荐文章:https://www.cnblogs.com/zhouyu2017/p/6485265.html 基于node.js安装淘宝镜像npm install -g ...安装全局vue-cli脚手架,用于帮助搭建所需的模板框架 在cmd里 1)输入...

    首先安装node.js环境:

    node.js安装推荐文章:https://www.cnblogs.com/zhouyu2017/p/6485265.html

    基于node.js安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org

    安装全局vue-cli脚手架,用于帮助搭建所需的模板框架

    在cmd里 1)输入:cnpm install -g vue-cli,回车,等待安装...

                2).输入:vue,回车,若出现vue信息说明表示成功

    到这里整个vue就安装完成了,接下来就是创建vue工程:

    打开cmd输入:vue init webpack 文件名 回车 vue init webpack-simple  创建简单工程

    用vue建项目后,npm install 发现老卡在chromedriver 报错上, 后来网上查了下,发现了解决办法,可以在构建项目前安装下面的插件
    npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

    加入依赖,启动工程

    在浏览器中输入:http://localhost:8080就可以访问了:

     

    展开全文
  • vue下载安装和使用

    千次阅读 2020-04-27 11:24:18
    vue下载安装的方式有多种,具体详情可以查看vue.js的官方文档:vue.js官方文档。 先写一种,其他的以后补充。 1、使用script标签的的方式引入vue.js 第一步:下载vue.js文件。 在文档的安装目录下找到使用一下的...

    一、vue的下载

    vue的下载安装的方式有多种,具体详情可以查看vue.js的官方文档:vue.js官方文档
    先写一种,其他的以后补充。
    1、使用script标签的的方式引入vue.js
    第一步:下载vue.js文件。
    在文档的安装目录下找到使用一下的位置,点击开发版本开始下载。
    vue.js下载
    第二步:将下载好的vue.js放到项目目录下,使用的时候直接用script标签引入就可以使用了。
    在这里插入图片描述
    运行可以看到结果,成功!
    在这里插入图片描述

    展开全文
  • vue.js下载安装的三种方法

    万次阅读 多人点赞 2018-07-02 19:09:01
    vue.js下载及安装的三种方法要下载安装vue首先得下载安装node.js和npm。下载安装好这两样以后就可以安装vue了,下面给大家介绍三种安装vue的方法。1.直接在官网上下载在官网上下载vue.js。并用<script&gt...
    vue.js下载及安装的三种方法
    要下载安装vue首先得下载安装node.js和npm。下载安装好这两样以后就可以安装vue了,下面给大家介绍三种安装vue的方法。
    1.直接在官网上下载
    在官网上下载vue.js。并用<script>标签引入。
    注意:下载时网址是 https://vuejs.org/v2/guide/installation.html
    而不是 https://cn.vuejs.org/v2/guide/installation.html ,这个虽然也是vue的网站,但是进去之后会显示源代码,而并非下载。
    2.使用bower下载
    bower是一个前端包管理工具。能帮我们跟踪前端包,并且保证他们是最新(或者是你指定的特定版本)。
    bower需要node,npm和git环境,在配置好这些环境之后通过npm的方式安装bower:npm install bower -g

    安装成功以后输入bower -v 查看bower版本。

    然后再输入bower i vue -g进行下载安装。

    下载完成以后输入vue可以查看相应的一些操作。

    3.直接用npm进行下载
    npm install vue

    可能会有些慢,耐心等待。

     

    公众号:Coder 杂谈,欢迎关注

    展开全文
  • MongoVUE 破解免费安装版。 安装说明: 解压后双击Installer.msi安装软件 安装后将MongoVUE.exe文件覆盖到C:\Program Files\MongoVUE\MongoVUE 1.6.9\目录下即可 MongoVUE
  • vue.js 三种方式安装(vue-cli)

    万次阅读 多人点赞 2018-05-29 07:49:05
    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。... 我们可以在Vue.js的官网上直接下载vue...

           Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。

           下面介绍三种 Vue.js 的安装方法:

            1.独立版本

           我们可以在Vue.js的官网上直接下载vue.js,并在.html中通过<script>标签中引用。->  <script src = ../vue.js> </script>  开发环境不要使用最小压缩版,不然会没有错误提示和警告!(页面中直接使用)

    使用vue多页面开发:

    1. 引入vue.js
    2. 创建一个vue根实例  new Vue({选项})

            2.使用CDN方法

         3.NPM方法(推荐使用)

          在用Vue.js构建大型应用的时候推荐使用NPM安装方法,NPM能很好的和诸如Webpack或者Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

         首先,先列出我们接下来需要的东西:

    • node.js环境(npm包管理器)
    • vue-cli 脚手架构建工具
    • cnpm npm的淘宝镜像      

           1) 安装node.js

                从node.js官网下载并安装node,安装过程很简单,一直点下一步就ok了,安装完之后,我们通过打开命令行工具(win+R),输入

            node -v 命令,查看node的版本,若出现相应的版本号,则说明你安装成功了。

                  

                 npm包管理器,是集成在node中的,所以安装了node也就有了npm,直接输入 npm -v 命令,显示npm的版本信息。

                  

            到目前为止,node的环境已经安装完成,npm 包管理器也有了,由于有些npm资源被屏蔽或者是国外资源的原因,经常会导致npm安装依赖包的时候失败,所以我们还需要npm的国内镜像----cnpm.

         2) 安装cnpm

               在命令行中输入  npm install -g cnpm --registry=http://registry.npm.taobao.org  ,然后等待,没报错表示安装成功,(我的已经安装过了,显示更新成功的信息),如下图:

                

           完成之后,我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的,查看淘宝npm镜像官网。

     

          3) 安装vue-cli2 脚手架构建工具(必须在全局中进行安装)

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

               是否安装成功:vue -V

                通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。

     

            首先我们要选择存放项目的位置,然后再用命令行cd到项目的目录中,在这里,我选择在c盘下创建新的目录(NodeTest 目录),用cd 将目录切到该目录下,如下图:

             

    在NodeTest 目录下,在命令行中运行命令 vue init webpack firstApp(初始化一个完整版的项目) 。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstApp是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在NodeTest 目录生成该文件夹),如下图:

    若我们在编辑器中已经手动创建了这个项目存放的文件夹cd到项目中:vue init webpack;初始化一下即可,同时还会加载webpack所依赖的包:

    是否是在本目录下进行创建

            

    输入命令后,会询问我们几个简单的选项,我们根据自己的需要进行填写就可以了。

    • Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写,所以我把名称改成了vueclitest
    • Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。
    • Author:作者,如果你有配置git的作者,他会读取。
    • Install  vue-router? 是否安装vue的路由插件,我们这里需要安装,所以选择Y
    • Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n(建议),如果你是大型团队开发,最好是进行配置。
    • setup unit tests with  Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我们这里不需要,所以输入n。
    • Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我们这里不需要,所以输入n

        运行初始化命令的时候会让用户输入几个基本的配置选项,如项目名称、项目描述、作者信息,对于有些不明白或者不想填的信息可以一直按回车去填写就好了,等待一会,就会显示创建项目创建成功,如下图:

         

     接下来,我们去NoteTest目录下去看是否已创建文件:

          

      打开firstApp 项目,项目中的目录如下:

          

        介绍一下目录及其作用:

         build:最终发布的代码的存放位置。

         config:配置路径、端口号等一些信息,我们刚开始学习的时候选择默认配置。

         node_modules:npm 加载的项目所需要的各种依赖模块。

         src:这里是我们开发的主要目录(源码),基本上要做的事情都在这个目录里面,里面包含了几个目录及文件:

                 assets:放置一些图片(会根据图片大小分类进行base64命名还是其他方式命名),如logo等

                 components:目录里放的是一个个的组件文件

                 router/index.js:配置路由的地方

                 App.vue:项目入口组件(跟组件),我们也可以将组件写这里,而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染,这里面的<router-view/>必不可少。

                 main.js :项目的核心文件(整个项目的入口js)引入依赖包、默认页面样式等(项目运行后会在index.html中形成一个app.js文件)。

         static:静态资源目录(会原分不动的对文件进行处理),如图片、字体等。

         test:初始测试目录,可删除

          .XXXX文件:配置文件。

         index.html:html单页面的入口页面,可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。

         package.json:项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。(大概版本)

         package-lock.json:项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。(具体版本)

         README.md:项目的说明文件。

         webpack.config.js:webpack的配置文件,例:把.vue的文件打包成浏览器能读懂的文件。

         .babelrc:是检测es6语法的配置文件,例:适配哪些浏览器的限制

         .gitignore:上传到服务器忽略哪些文件的配置(比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置)

         .postcssrc.js:前缀的配置 (css转化的配置)

         .editorconfig:对代码进行规范,例:root是否进行检测,代码尾部是否换行,缩行前面几个空格...(建议定义这个规范)

         .eslintrc.js:配置eslint语法规则(在这里面的rules属性中配置让哪个语法规则失效)

         .eslintignore:忽略eslint对项目某些文件的语法规则的检查

     

        这就是整个项目的目录结构,其中,我们主要在src目录中做修改(模块化开发)。这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装。

        cd  项目名;进入项目中

        安装项目所需要的依赖包/插件(在package.json可查看):执行 cnpm install   (npm可能会有警告,这里可以用cnpm代替npm了,运行别人的代码需要先安装依赖)如果创建项目的时候没有报错,这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install

    若拿到别人的项目或从gethub上下载的项目第一步就是要在项目中cnpm install;下载项目所依赖的插件,然后npm run dev 运行项目

        

        安装完成之后,我们到自己的项目中去看,会多一个node_modules文件夹,这里面就是我们所需要的依赖包资源。

        

     安装完依赖包资源后,我们就可以运行整个项目了。

        

       运行项目

        在项目目录中,运行命令 npm run dev (npm run start),会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

        

        项目启动后,在浏览器中输入项目启动后的地址:

      

        在浏览器中会出现vue的logo:

         

    至此,vue的三种安装方式已介绍完毕。

     

    项目完成后输入打包命令:cnpm run build;会生成一个dist文件,就是我们的打包文件,点击.html文件能运行则成功。

    一、搭建vue的开发环境(大纲)

    1. 必须安装node.js
    2. 搭建vue的开发环境,安装vue的脚手架工具    官方命令行工具

    npm install - -global vue-cli

         3.创建项目   必须cd到对应的一个项目里面

    vue init webpack vue-demo01

    cd  vue-demo01

    cnpm install   /  npm install          如果创建项目的时候没有报错,这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install 

    npm run dev/npm run start

         4.另一种创建项目的方式中小型项目   (推荐)  ***

    vue init webpack-simple vuedemo02

    cd  vuedemo02       

    cnpm install   /  npm install           

    npm run dev

     

    拿到别人的项目不能正常运行后看有没有node_modules这个文件(项目所有的依赖),若没有cd到项目中安装项目的依赖:cnpm install/npm install

     

    二、升级:vue-cli3.0

    一、使用vue-cli3.0

    1. Vue CLI的包名称由vue-cli改成了@vue/cli
    2. 如果你已经全局安装了旧版本的vue-cli(3.0以下),你需要先通过npm uninstall vue-cli -g/yarn global remove vue-cli卸载它。
    3. Node.js8.9+
    4. 安装vue-cli3.0     npm install -g @vue/cli  或者 yarn global add @vue/cli
    5. 版本是否是3.x    vue --version/vue -V
    • 通过vue-cli创建项目
    1. 创建项目命令

    vue create 项目名;   项目名不建议存在大写,中间用-隔开

    这时候需要注意创建项目需要预先安装的插件:

    默认的会有Babel + ESLint;但是不建议默认,选择下面:

    ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    >( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
    ( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人再用
    ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
    ( ) Router // vue-router(vue路由)
    ( ) Vuex // vuex(vue的状态管理模式)
    ( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
    ( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
    ( ) Unit Testing // 单元测试(unit tests)
    ( ) E2E Testing // e2e(end to end) 测试 

    等待项目初始化完成。。。。。。

    1.cd 到项目里

    2.npm run serve   运行项目

     

    或者使用图形化界面创建项目:

    vue ui

    registerServiceWorker.js:这个就是service workers的配置文件,可以对sw的各个生命周期进修改。(这个一般用的少)

    自定义配置文件:vue.config.js(固定)

    创建好项目后会发现找不到webpack.config.js配置文件,这是vue-cli3不想让我们随意看到配置文件隐藏起来了,可以通过在根目录下创建一个vue.config.js(名字固定)来添加我们的配置(在运行时会自动添加到webpack.config.js文件上)

    vue.config.js配置项

    三、vue-cli3中拉取vue-cli2

    拉取 2.x 模板 (旧版本)

    Vue CLI >= 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具

    npm install -g @vue/cli-init
    # `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
    vue init webpack my-project

    https://cli.vuejs.org/zh/guide/creating-a-project.html

    runtime+compiler和runtime-only的区别:在main.js文件中

      /**
       *等价于
      render: function(h) {
        return h(App);
      }
        等价于
      render: function(createElement) {
        return createElement('h2');
      }
      */

        1.如果在开发中使用的是template,就需要选runtime-compiler
        2.如果在开发中使用的是.vue文件夹,就需要选runtime-only(比上面那种模式轻大约 6KB,但是 template (或任何特定于vue的html)只允许在.vue文件中使用——其他地方用需要 render 函数;.vue 文件中的template也是被 vue-template-compiler 翻译成了render函数,所以只能在.vue里写 template)
        3.runtime-compiler的vue程序运行过程:
              template---------------->ast------------->render---------------->vdom------------------>UI
               (模板)    解析   (抽象语法树)  编译  (render函数)  形成  (虚拟DOM)  转成   (真实DOM)
        4.runtime-only的vue程序运行过程:
              render------------------->vdom-------------->UI
            (render函数)  形成  (虚拟DOM)  转成   (真实DOM)
        5.runtime-only的性能更高、代码量更少

     

     

     

     

    看了那么多的vue.js的安装方式总结一下。如有不多请多多指教!希望给您带来帮助!

    参考文献:https://blog.csdn.net/m0_37479246/article/details/78836686

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

    千次阅读 2019-04-08 15:47:45
    下载vue-cli(cmd命令行下) npm install -g vue-cli 创建一个基于webpack模板的新项目(cmd命令行下) 记得切换目录,在当前目录下创建 vue init webpack ['项目名'] 选装: ? Project name vue-project -->项...
  • vue下载安装详细教程

    千次阅读 2021-06-10 23:50:46
    双击安装安装路径随意,勾选第四项,把node添加进path 勾选,帮我们自动下载插件 ③、在cmd中输入node -v,若出现版本号,则安装成功 ④、如果npm包管理不想存放C盘的话,那就手动创建红框里的两个文件夹于安装...
  • vue-cli安装

    千次阅读 2018-08-20 10:56:26
    node安装完成后会自带npm,vue-cli通过npm安装 安装完成后输入 node -v 查看node版本 查看npm版本,输入npm-v 2、安装vue-cli 全局安装vue npm install vue-cli -g 安装完成输入vue -V查看版本(这里V...
  • vue devtools的安装

    千次阅读 2017-12-06 13:56:09
    vue devtools的安装
  • vue.js下载安装教程

    万次阅读 2017-03-21 19:46:20
    1、 下载node.js 网址:https://nodejs.org/en/ 版本:v7.7.3 (版本号大于v7.6.0) 2、 安装node.js Node.js下载如下所示: 注意:在安装Node.js前,先cmd(命令提示符)运行“node–v”查看是否...
  • vue调试工具vue-devtools安装及使用

    千次阅读 2018-07-11 18:16:46
    vue调试工具vue-devtools安装及使用 本文主要介绍 vue的调试工具 vue-devtools 的安装和使用 工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧 安装: 1.到github下载: git clone ...
  • Vue环境安装

    千次阅读 2017-04-29 16:43:35
    Vue的正常安装步骤。
  • MongoVUE 下载 安装 使用

    千次阅读 2013-02-18 11:05:47
    习惯了mysql 图形界面的使用,用mongo看命令行始终不太方便,MongoVUE不失为很好的选择! ...MongoVUE 是个比较好用的MongoDB客户端,不过免费版在15天过后,不能使用gridfs,Server Monitorin
  • Vue脚手架安装

    千次阅读 2020-06-22 10:15:52
    安装node.js 1.官网下载node.js ...安装vue 脚手架 安装 npm i @vue/cli -g 测试安装 vue -V 创建vue项目 vue create 项目名称 创建过程截图 运行项目 cd项目文件夹 npm run serve 运行项目 ...
  • Vue axios安装 qs安装

    千次阅读 2020-03-30 16:10:41
    好多人使用都是npm开头安装 我自己安的时候报各种错 然后就在前面加了c 变成cnpm就可以了 cnpm install axios --save cnpm install qs 引用 import Axios from "axios" Vue.prototype.$axios = Axios ...
  • 1.依赖node所以先安装node,可从官网下载安装,安装一直下一步最后选安装目录 2.win+r输入cmd运行,先输入node -v和npm -v查看node安装是否正常(我这里node是10.5.0 npm是6.1.0) 3.安装vue,npm安装过慢且成功率...
  • vue-devtools 安装

    万次阅读 2018-09-29 10:52:41
    由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么。 但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试。 一、下载chrome扩展插件 GitHub下载地址: git clone...
  • 在使用 Vue 时,我们推荐在浏览器上安装 Vue Devtools。vue-devtools是一款基于Chrome浏览器的扩展,用于调试Vue应用。 下载 Github下载地址:https://github.com/vuejs/vue-devtools/tree/v5.1.1 解压下载的文件...
  • Vue.js下载安装

    万次阅读 2018-05-26 18:11:37
    1. 特点:Vue.js:是一套构建用户界面的渐进式框架 Vue:只关注视图层,采用自底向上增量开发的设计 Vue:目标是通过尽可能简单的API实现响应的数据绑定... Vue.js的下载与安装 1)下载安装Node.js 前面已介绍过...
  • vue-devtools的下载安装

    万次阅读 多人点赞 2019-03-05 14:33:39
    vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。 下载地址:链接: https://pan.baidu.com/s/1nPUcbFRCx6r9eoHaQ8rKXA 提取码: p3un 安装: 1、打开chrome,进入...
  • VueCli 中安装 axios

    千次阅读 2020-12-12 23:54:00
    介绍 Vue安装 axios 的方法。
  • vue脚手架安装

    千次阅读 2020-06-08 15:02:53
    在搭建vue的开发环境之前,需要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,node可以在官网或者中文网里面下载,根据自己的电脑选择是32还是64 , 网址1:http://nodejs.cn/download/ 网址2:...
  • vue 安装教程

    千次阅读 2020-09-28 13:32:32
    下载node.js 下载网址:...安装vue cnpm install vue 全局安装 vue-cli cnpm install --global vue-cli 以上代码运行一次即可 创建一个基于 webpack 模板的新项目 vue init webpack “相对路径/
  • setting plugins中找不到Vue.js插件 使用IDEA时打开Setting->Plugins找不到vue.js插件 看其他网友Marketplace...官网下载Vue.js插件 下载链接:Vue.js - Plugins 1.下载合适版本的插件,并解压 2.将...
  • vue3.0版本安装

    千次阅读 2019-07-16 17:24:00
    如果安装过其他版本的vue的话先卸载 npm uninstall -g vue-cli //卸载指令 卸载不会影响以前项目的启动  然后安装 NPM安装: npm install -g @vue/cli淘宝镜像:cnpm install -g @vue/cli苹果:yarn ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 59,997
精华内容 23,998
关键字:

vue免费下载安装

vue 订阅