精华内容
下载资源
问答
  • vue.js 三种方式安装(vue-cli)

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

           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

    展开全文
  • vue】使用vue-cli4.0快速搭建一个项目

    万次阅读 多人点赞 2019-10-25 10:38:43
    前言 最近公司的项目终于到了空闲期,而闲不住的我终于把目标放到了项目的迁移上面 因为公司的项目比较早的原因(虽然...所以所有项目开发的时候一直在用的 vue-cli2.0,后来项目多了也没时间就没往 vue-cli3.0 迁...

    前言

    最近公司的项目终于到了空闲期,而闲不住的我终于把目标放到了项目的迁移上面

    因为公司的项目比较早的原因(虽然当时vue-cli3.0也出来了一段时间,但是不敢轻易尝试啊!)

    而又因为公司的前端项目都是我来搭建的原因(并不是技术大佬,入职早!)

    所以所有项目开发的时候一直在用的 vue-cli2.0

    后来项目多了也没时间就没往 vue-cli3.0 迁移

    现在终于到了空闲期,可以尝试着慢慢迁移了

    本篇文章就是主要记录迁移的过程和 vue-cli3.0 的搭建过程

    一、升级本地环境

    因为 vue-cli3.0 要 nodeJs ≧ 8.9(官方推荐 8.11.0+),所以我们先去 官网下载 一个稳定的新版本覆盖本地版本

    我安装的是 node12.13.0 版本,因为之前我本地全局安装了 2.0 的环境,所以需要全局卸载再安装 3.0

    npm uninstall -g vue-cli
    
    npm install -g @vue/cli

    安装好了之后输入 vue -V 查看版本

    我我我草!!!最近只顾着看技术了,没发现10月16日官方已经宣布 vue-cli4.0 已经正式发布了!!!

    有没有搞错,我 vue-cli3.0 还没来得及用上呢!还好看了下文档,除了跟 vue-cli3.0 的目录有点变化其他没变。

    那就直接开始搞 vue-cli4.0 吧!

    二、搭建项目

    vue-cli3.0 以后项目创建的命令变成了下面这样

    vue create <Project Name> //文件名 不支持驼峰(含大写字母)

    竟然还被嫌弃了我的网速,我还就不用 cnpm 了!

    选择不使用淘宝镜像后,选择手动配置

    default 是使用默认配置

    Manually select features 是自定义配置

    我的自定义配置如下

    选择是否使用路由 history router,其实直白来说就是是否路径带 # 号,建议选择 N,否则服务器还要进行配置

    css 的预处理器我选择的是 Sass/SCSS(with dart-sass) 。node-sass是自动编译实时的,dart-sass需要保存后才会生效

    sass 官方目前主力推 dart-sass 最新的特性都会在这个上面先实现

    选择 ESLint 代码校验规则,提供一个插件化的javascript代码检测工具,ESLint + Prettier 使用较多

    然后选择什么时候进行代码校验,Lint on save 保存就检查,Lint and fix on commit   fix 或者 commit 的时候检查,建议第一个

    下面就是如何存放配置了,In dedicated config files 存放到独立文件中,In package.json 存放到 package.json 中

    本着项目结构简单的想法,我选择了第二个

    最后就是是否保存本次的配置了,N 不记录,如果选择 Y 需要输入保存名字

    我这里就不保存了,原因是熟能生巧!哈哈哈

    然后就等待创建项目吧

    出现如图红框所示的提示,就搭建成功,进入项目目录,直接输入 npm run serve 就可以了

    你以为这样就完了吗?我也是这样认为的,可它不是这样的!

    很明显,虽然项目能够正常启动,但是我的 nodeJs 版本用的太高了,然后我给回退到了 11.11.0 版本

    虽然没影响太大的影响,但是我不想看见 WARN!回退之后,重新跑项目就不会有问题了。

    三、环境配置

    下面就是关于项目的环境配置了,我这边一般喜欢用 test、preview、production分别表示测试,预览,生产三种环境

    修改 package.json 文件如下

    "scripts": {
        "serve": "vue-cli-service serve",
        "test": "vue-cli-service build --mode test",           //测试
        "preview": "vue-cli-service build --mode preview",     //预览
        "build": "vue-cli-service build --mode production",    //生产
        "lint": "vue-cli-service lint"
    },

    在项目根目录下新建 .env.test、.env.preview、 .env.production 文件,分别对应三个环境的配置文件,注意,名字要与 --mode 后面的名字分别对应

    .env.test 代码如下

    NODE_ENV="test"
    VUE_APP_BASE_URL="测试环境域名"

    .env.pre 代码如下

    NODE_ENV="preview"
    VUE_APP_BASE_URL="预览环境域名"

    .env.prod 代码如下

    NODE_ENV="production"
    VUE_APP_BASE_URL="生产环境域名"

    ok,这样环境就配置好了,分别用以下命令来打包不同环境的包就可以了

    npm run test    //测试
    npm run pre     //预发布
    npm run prod    //生产

    另外需要说明一点的是,本地环境会默认从 .env.development 文件中读取配置

    所以记得有需要记得新建一个然后存放配置

    我的 .env.development 代码如下

    NODE_ENV="development"
    VUE_APP_BASE_URL="本地环境域名"

    四、项目配置

    从 vue-cli3.0 开始 build 和 config 目录就取消了,如果需要修改配置,可以在项目的根目录新建一个 vue.config.js 文件来覆盖项目的配置,因为项目的配置比较多,这里就不分别介绍了,可以 访问官方文档

    五、项目迁移

    剩下的就是比较简单的工作了,因为 2.0/3.0/4.0 的src目录是基本一致的,所以照着原来的项目搬进来就可以了

    唯一需要注意的就是路径的问题了

    结束语

    本来,这个文章真的是为了从 2.0 迁移到 3.0 的,没想到 4.0 都发布了,那刚好迁移到 4.0 得了

    文章标题我会修改为 4.0,但是文章内可能还会有 3.0 我就不修改了

    一是证明我的最初想法,二是感慨前端的发展速度!

     

    有问题欢迎评论指出

    展开全文
  • vue-cli

    千次阅读 2020-11-27 13:30:11
    vue-cli2和vue-cli3的区别 https://www.cnblogs.com/webdragon/p/11025921.html 网上很多vue-cli2和vue-cli3混合在一起的博文, 但大部分都没写是哪个版本的 vue-cli3的两种创建方式: vue ui 和 vue create 项目名 ...

    要掌握的知识如下

    设计模式
    qrcode
    less, sass, scss, stylus
    浏览器原理
    node.js
    import, require
    webpack
    vue
    vue.config.js
    vue-cli3
    vuex
    vue-router
    vue-axios, axios
    vue-lazyload
    fastclick
    NProgress
    element-ui
    AntDesignVue
    vue-awesome-swiper, swiper
    eslint
    git


    js底层 (没有系统学习, 瞎琢磨的)

    函数即对象: 因为函数除了可以作为函数之外, 函数还可以有属性和方法
    在这里插入图片描述
    构造函数: 有this的才叫构造函数
    在这里插入图片描述
    下面这个是通过{}创建出来的, 用{}创建跟用Object构造函数创建一样, 所以该创建该对象的构造函数是Object而不是Juln
    在这里插入图片描述
    对prototype和__proto__的理解: 首先只需要知道三个东西, 构造函数, 实例对象, 原型对象.
    每个构造函数都有一个原型对象, 实例对象与实例对象的数据都是独立各一份的, 由于它们之间无法共享数据, 所以就需要一个桥梁来共享, 那就是原型对象. 另外: 实例对象.__ proto __ === 构造函数.prototype; 构造函数.prototype === 原型对象; 通过上面这两个公式还可以推出下面三个(但非常情况会失效): 实例对象.__ proto __ === 原型对象; 原型对象.constructor === 构造函数; 构造函数.prototype.constructor === 构造函数
    因此, 实例对象有两种属性, 一种是本身的属性, 一种是通过引用(原型对象身上的属性)得来的属性, 而这种引用属性是共享的, 只要这几个实例对象的原型对象是同一个就行.
    以上说的非常情况比如: 你把原型对象下的constructor设置为其它值, 只要不是构造函数就行, 这样一来原型对象下就没有这个构造函数了, 因此再通过该构造函数创建出来的实例对象就失去数据共享的功能了. 或者直接把原型对象替换成其他的原型对象, 那么 实例对象.__ proto __ 就会指向其他原型对象, 因为 实例对象.__ proto __ 是永远 === 构造函数.prototype 的.

    总结如下: 声明函数时, 系统会在内存中创建出一个空对象, 并把函数的原型对象指向这个空对象, 然后把空对象的构造函数指向函数本身. 创建对象时, 系统会将创建对象的原型对象指向构造函数的原型对象.


    vue-cli2和vue-cli3的区别

    https://www.cnblogs.com/webdragon/p/11025921.html

    网上很多vue-cli2和vue-cli3混合在一起的博文, 但大部分都没写是哪个版本的

    vue-cli3的两种创建方式: vue ui 和 vue create 项目名
    vue-cli3相比vue-cli2少了很多配置. build、config这些配置文件不开放了。但可以在根目录下创建一个 vue.config.js 文件存放配置。https://cli.vuejs.org/zh/guide/webpack.html


    process.env

    在这里插入图片描述
    process.env.NODE_ENV - 会是 “development”、“production” 或 “test” 中的一个。具体的值取决于应用运行的模式。
    process.env.BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符,即你的应用会部署到的基础路径。


    vue技术栈

    less
    1. npm i less less-loader -D
    2. vue文件中 <style lang="less" rel="stylesheet/less" scoped>即可使用
    element-ui
    1. npm i element-ui -S 或 vue add element
    2. 全部导入 (不推荐):
      在main.js下
      import ElementUI from 'element-ui';
      import 'element-ui/lib/theme-chalk/index.css';
      Vue.use(ElementUI);
      
    3. 按需导入 (推荐, 但按需导入全部和全部导入一样):
      在 vue文件的script顶部
      import Vue from 'vue'
      import { Button, Select } from 'element-ui'
      Vue.use(Button)
      Vue.use(Select)
      /* 或写为
      Vue.component(Button.name,Button)
      Vue.component(Select.name,Select)
      
    axios
    1. npm i axios -S
    2. 在main.js下
      import axios from 'axios'
      Vue.prototype.$http = axios
      
    axios & vue-axios
    1. npm i axios vue-axios -S
    2. 在main.js下
      import vueAxios from 'vue-axios'
      import axios from 'axios'
      Vue.use(vueAxios,axios)
      // 基础请求路径。非生产环境 && 开启代理, 接口前缀统一使用[/api]前缀做代理拦截!
      axios.defaults.baseURL = process.env.NODE_ENV !== 'production' ? process.env.VUE_APP_BASE_API : process.env.VUE_APP_SERVER_URL;
      // 超时时间
      axios.defaults.timeout = 100000
      // 跨域请求,允许保存cookie
      axios.defaults.withCredentials = true
      // axios.defaults.headers = {'Content-Type': 'application/json; charset=utf-8'}
      axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8'
      
    vue-awesome-swiper, swiper

    不要用新版本的, 官网没说明新版本的用法

    vue-lazyload

    详细说明看这个: https://segmentfault.com/a/1190000014928116

    1. npm i vue-lazyload -D (或使用CDN https://unpkg.com/vue-lazyload/vue-lazyload.js")

    2. 在main.js下

      import VueLazyload from 'vue-lazyload'
      Vue.use(VueLazyload, {
        preLoad: 1.3,
        error: require('@/assets/img/error.png'),
        loading: require('@/assets/img/loading.gif'),
        attempt: 3, // 尝试请求次数, 默认为3
        listenEvents: [ 'scroll' ], // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
      })
      

      参数表:
      在这里插入图片描述

    3. 在vue中

      <img v-lazy='/static/img1.jpg' alt="" />
      
    fastclick
    1. npm install fastclick -S
    2. 在main.js下
      import FastClick from 'fastclick'
      // 当使用FastClick 时,input框在ios上点击输入调取手机自带输入键盘不灵敏,有时候甚至点不出来。而安卓上完全没问题。这个原因是因为FastClick的点击穿透. 下面代码解决这个问题
      FastClick.prototype.onTouchEnd = function(event) {
      	if(event.target.hasAttribute("type") && event.target.getAttribute("type") == "text") {
      		event.preventDefault() 
      		return false
      	}
      }
      FastClick.attach(document.body) // 全局引入
      
    3. 局部取消fastclick来立刻触发点击事件
      <a class="needsclick">Ignored by FastClick</a>
      
    NProgress
    1. npm install NProgress -S
    2. router.js下
      router.beforeEach( (to,from,next) => {
        if(to.path === from.path) return next();
        NProgress.start();
        next();
      });
      
      router.afterEach( () => {
        NProgress.done();
      })
      
    element-china-area-data

    https://github.com/Plortinus/element-china-area-data

    cross-env

    略…

    展开全文
  • vue-cli:Vue-Cli-源码

    2021-04-08 11:24:07
    Vue-Cli Vue-Cli
  • vue-cli-plugin-bootstrap-vue 适用于Bootstrap-Vue插件 安装 如果尚未安装vue-cli,请先按照此处的安装说明进行操作: : 使用vue-cli生成项目 vue create my-app 在安装bootstrap-vue插件之前,请确保提交或隐藏...
  • vue-cli原始码分析 写在前面 其实最开始不是特意意来研究vue-cli的原始码,只是想了解下node的命令,如果想要了解node命令的话,那么绕不开写的 。...@ vue / cli-service 整体介绍 内置插件 请作者喝杯咖啡 :hot_be
  • homebrew-vue-cli:使用Homebrew安装Vue CLI
  • vue-cli-service serve 'vue-cli-service' 不是内部或外部命令,也不是可运行的程序 或批处理文件。 package.json 中添加了vue-cli-service 本地环境未安装vue-cli npm install --global vue-cli ...

    现象:

    > vue-cli-service serve

    'vue-cli-service' 不是内部或外部命令,也不是可运行的程序
    或批处理文件。

    原因:

    本地环境未安装vue-cli

    解决方案:

    在package.json 中添加了 vue-cli-service

    执行如下命令

    npm install --global vue-cli
    
    cnpm install vue-cli -g 


     

    展开全文
  • vue-cli-plugin-notifier 这是一个插件,它使用包向用户显示构建状态系统通知。 安装 npm install --save-dev vue-cli-plugin-notifier # OR yarn add --dev vue-cli-plugin-notifier 配置 在vue.config.js文件中:...
  • vue启动一个项目的时候,需要执行npm run serve,其中这个serve的内容就是vue-cli-service serve。可见,项目的启动关键是这个vue-cli-service与它的参数serve。接下来我们一起看看service中主要写了什么东东(主要...
  • :South_Korea: Vue-Cli-Locale-ko @ vue / cli的韩语本地化 由vue-cli自动加载。 :copyright: 执照
  • 1.vue-cli 构建项目 //全局安装 vue-cli npm install - g vue- cli //创建一个基于 webpack 模板的新项目 vue init webpack my- project //cd 进入刚新建的项目文件(my-project) cd my- project // 运行 ...
  • vue-cli预设 Vue.js CLI的样本预设 vue create --preset flaviocopes/vue-cli-preset example-app
  • vue-cli-plugin-chrome-extension-cli English || 使用Vue-CLI轻松启动chrome扩展项目! 支持vue2 vue3 TypeScript和JavaScript! 安装 该插件用于将新项目用于chrome扩展。 在Vue的默认项目上测试,使用...
  • 步骤一: 检查package.json 中是否有 vue-cli-server,没有则需安装 步骤二 : 执行npm install命令 步骤三: 执行npm run dev 命令,查看程序是否运行正常 如果仍有异常,则检查是否有 node modules 文件有则删除 ;...
  • 类星体框架:vue-cli-plugin-quasar :rocket: 在2分钟内开始使用Quasar Framework构建Vue应用! :warning_selector: 为了获得Quasar的高级(推荐)体验,包括构建Mobile&Electron应用程序以及轻松升级到新...
  • 无需任何代码库修改即可直接使用的vue-cli项目。 目录 用法 vue add vite 插件的生成器将为相应的main。{js,ts}编写一些main.html ,因为vite需要html文件作为dev-server条目文件 动机 我们有很多现有的vue-cli...
  • 本文介绍了vue使用vue-cli快速创建工程,分享给大家,具体如下: vue-cli安装 npm i vue-cli -g vue init webpack-simple vue-todos vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue ...
  • vue-cli3.0使用及配置(部分)

    万次阅读 多人点赞 2018-06-19 22:18:28
    1.先全局安装vue-cli3.0 检测安装: vue -V 2.创建项目(这个就跟react创建脚手架项目比较像了) 这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是 让你选...
  • vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli  一、 安装 node.js 首先需要安装node环境,可以直接到中文官网...
  • Vue事件 v-on vue计算属性&watch vue组件 vue路由 webpack打包 vue-cli-脚手架
  • vue-cli3脚手架vue +打字稿+ vue-property-decorator + vue-class-component + axios 纱 毛线发球 毛线生成
  • vue-cli-plugin-模块化vuex 为创建模块化Vuex存储 安装 如果尚未安装vue-cli 3,请先按照此处的安装说明进行操作: : 提示:如果由于仍然需要vue init而不想覆盖当前的vue-cli,请。 使用vue-cli 3.0生成项目 ...
  • vue-cli4全面配置(持续更新) 细致全面的vue-cli4配置信息。涵盖了使用vue-cli开发过程中大部分配置需求。 不建议直接拉取此项目作为模板,希望能按照此教程按需配置,或者复制vue.config.js增删配置,并自行安装所...
  • vue-cli-plugin-stylelint 用法 # under vue project folder npm install -D vue-cli-plugin-stylelint vue invoke stylelint
  • Vue-cli 「 desc 」 Explanation "version": "3.0.0-beta.9", 使用 vue create my-project 本目录 package.json 请不要用单一库, 来看待 vue-cli 我们下载时使用 npm install -g @vue/cli @vue 什么东西, 你可以将 @...
  • vue-cli-plugin-vuetify-preset-basil 罗勒材料研究 vue-cli-plugin-vuetify-preset-crane 起重机材料研究 vue-cli-plugin-vuetify预置-每两周一次 每两周进行一次材料研究 vue-cli-plugin-vuetify预设猫头鹰 ...
  • 1、新建两个文件夹,分别用于存放vue-cli2和vue-cli3 2、进入vue2文件夹下载安装vue-cli2.0 vue-cli2.0版本下载命令为npm install vue-cli或者npm install vue-cli@版本号,这里我指定了版本号,还有这里不要加-g,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 121,154
精华内容 48,461
关键字:

vue-cli

vue 订阅