vue.js 订阅
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。 [1] 展开全文
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。 [1]
信息
稳定版本
2.6.10
开发商
尤雨溪
软件授权
MIT License
软件名称
Vue.js
更新时间
2019年3月20日
初始版本
0.11
软件版本
vue0.11 vue0.12 vue1.0 vue2.0
软件语言
JavaScript
软件大小
生产版:76 KB,开发版:240 KB
Vue.js简介
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 [2]  。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时 [3]  ,Vue.js 也能完美地驱动复杂的单页应用。
收起全文
精华内容
下载资源
问答
  • 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-cli 脚手架构建工具(必须在全局中进行安装)

               在命令行中运行命令 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:放置一些图片,如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:项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。

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

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

         .babelrc:是检测es6语法的文件的配置

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

         .postcssrc.js:前缀的配置 

         .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. 安装vue3.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

     

     

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

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

    展开全文
  • Vue.js CLI4 Vue.config.js标准配置 (最全注释)

    万次阅读 多人点赞 2019-11-26 11:11:35
    Vue.js CLI工具 不知不觉发展到了4.0时代,CLI给人最直白的感受是没有了build文件夹跟config文件夹,所有的配置都在Vue.config.js完成。那么该文件的配置至关重要。现在我们来看一下最新配置是怎么配置的。 // vue....

    前言:

    Vue.js CLI工具 不知不觉发展到了4.0时代,CLI给人最直白的感受是没有了build文件夹跟config文件夹,所有的配置都在Vue.config.js完成。那么该文件的配置至关重要。现在我们来看一下最新配置是怎么配置的。

    有三种方式,推荐第二种标准版(无需安装依赖,直接复制即可配置)。

    1、依赖库
    npm install vue-cli-configjs
    
    2、标准版
    // vue.config.js
    const path =  require('path');
    const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
    const resolve = (dir) => path.join(__dirname, dir);
    module.exports = {
        publicPath: process.env.NODE_ENV === 'production' ? '/site/vue-demo/' : '/',  // 公共路径
        indexPath: 'index.html' , // 相对于打包路径index.html的路径
        outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
        assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录
        lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
        runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
        productionSourceMap: !IS_PROD, // 生产环境的 source map
        parallel: require("os").cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建。
        pwa: {}, // 向 PWA 插件传递选项。
        chainWebpack: config => {
            config.resolve.symlinks(true); // 修复热更新失效
            // 如果使用多页面打包,使用vue inspect --plugins查看html是否在结果数组中
            config.plugin("html").tap(args => {
                // 修复 Lazy loading routes Error
                args[0].chunksSortMode = "none";
                return args;
            });
            config.resolve.alias // 添加别名
                .set('@', resolve('src'))
                .set('@assets', resolve('src/assets'))
                .set('@components', resolve('src/components'))
                .set('@views', resolve('src/views'))
                .set('@store', resolve('src/store'));
        },
        css: {
            extract: IS_PROD,
            requireModuleExtension: false,// 去掉文件名中的 .module
            loaderOptions: {
                    // 给 less-loader 传递 Less.js 相关选项
                    less: {
                        // `globalVars` 定义全局对象,可加入全局变量
                        globalVars: {
                            primary: '#333'
                        }
                    }
            }
        },
        devServer: {
                overlay: { // 让浏览器 overlay 同时显示警告和错误
                  warnings: true,
                  errors: true
                },
                host: "localhost",
                port: 8080, // 端口号
                https: false, // https:{type:Boolean}
                open: false, //配置自动启动浏览器
                hotOnly: true, // 热更新
                // proxy: 'http://localhost:8080'   // 配置跨域处理,只有一个代理
                proxy: { //配置多个跨域
                    "/api": {
                        target: "http://172.11.11.11:7071",
                        changeOrigin: true,
                        // ws: true,//websocket支持
                        secure: false,
                        pathRewrite: {
                            "^/api": "/"
                        }
                    },
                    "/api2": {
                        target: "http://172.12.12.12:2018",
                        changeOrigin: true,
                        //ws: true,//websocket支持
                        secure: false,
                        pathRewrite: {
                            "^/api2": "/"
                        }
                    },
                }
            }
    }
    
    3、升级版
    // vue.config.js
    const path =  require('path');
    
    const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩, 按需引用
    const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // 开启gzip压缩, 按需写入
    const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 打包分析
    
    const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
    const resolve = (dir) => path.join(__dirname, dir);
    module.exports = {
        publicPath: process.env.NODE_ENV === 'production' ? '/site/vue-demo/' : '/',  // 公共路径
        indexPath: 'index.html' , // 相对于打包路径index.html的路径
        outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
        assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录
        lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
        runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
        productionSourceMap: !IS_PROD, // 生产环境的 source map
        parallel: require("os").cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建。
        pwa: {}, // 向 PWA 插件传递选项。
        chainWebpack: config => {
            config.resolve.symlinks(true); // 修复热更新失效
            // 如果使用多页面打包,使用vue inspect --plugins查看html是否在结果数组中
            config.plugin("html").tap(args => {
                // 修复 Lazy loading routes Error
                args[0].chunksSortMode = "none";
                return args;
            });
            config.resolve.alias // 添加别名
                .set('@', resolve('src'))
                .set('@assets', resolve('src/assets'))
                .set('@components', resolve('src/components'))
                .set('@views', resolve('src/views'))
                .set('@store', resolve('src/store'));
            // 压缩图片
            // 需要 npm i -D image-webpack-loader
            config.module
                .rule("images")
                .use("image-webpack-loader")
                .loader("image-webpack-loader")
                .options({
                    mozjpeg: { progressive: true, quality: 65 },
                    optipng: { enabled: false },
                    pngquant: { quality: [0.65, 0.9], speed: 4 },
                    gifsicle: { interlaced: false },
                    webp: { quality: 75 }
                });
            // 打包分析
            // 打包之后自动生成一个名叫report.html文件(可忽视)
            if (IS_PROD) {
                config.plugin("webpack-report").use(BundleAnalyzerPlugin, [
                    {
                        analyzerMode: "static"
                    }
                ]);
            }
        },
        configureWebpack: config => {
            // 开启 gzip 压缩
            // 需要 npm i -D compression-webpack-plugin
            const plugins = [];
            if (IS_PROD) {
                plugins.push(
                    new CompressionWebpackPlugin({
                        filename: "[path].gz[query]",
                        algorithm: "gzip",
                        test: productionGzipExtensions,
                        threshold: 10240,
                        minRatio: 0.8
                    })
                );
            }
            config.plugins = [...config.plugins, ...plugins];
        },
        css: {
            extract: IS_PROD,
            requireModuleExtension: false,// 去掉文件名中的 .module
            loaderOptions: {
                    // 给 less-loader 传递 Less.js 相关选项
                    less: {
                        // `globalVars` 定义全局对象,可加入全局变量
                        globalVars: {
                            primary: '#333'
                        }
                    }
            }
        },
        devServer: {
                overlay: { // 让浏览器 overlay 同时显示警告和错误
                  warnings: true,
                  errors: true
                },
                host: "localhost",
                port: 8080, // 端口号
                https: false, // https:{type:Boolean}
                open: false, //配置自动启动浏览器
                hotOnly: true, // 热更新
                // proxy: 'http://localhost:8080'   // 配置跨域处理,只有一个代理
                proxy: { //配置多个跨域
                    "/api": {
                        target: "http://172.11.11.11:7071",
                        changeOrigin: true,
                        // ws: true,//websocket支持
                        secure: false,
                        pathRewrite: {
                            "^/api": "/"
                        }
                    },
                    "/api2": {
                        target: "http://172.12.12.12:2018",
                        changeOrigin: true,
                        //ws: true,//websocket支持
                        secure: false,
                        pathRewrite: {
                            "^/api2": "/"
                        }
                    },
                }
            }
    }
    
    

    结语

    上述代码可以直接复制,也可以按需引入,一般都用的到,注意里面需要安装的依赖。
    注意第三种方式:可能在安装以下依赖时,会报错,建议按以下顺序安装。

    npm install --save-dev  compression-webpack-plugin
    
    npm install --save-dev  image-webpack-loader 
    

    作者:Vam的金豆之路

    主要领域:前端开发

    我的微信:maomin9761

    微信公众号:前端历劫之路


    展开全文
  • vue.js 三种方式安装

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

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

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

            1.独立版本

     

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

     

            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=https://registry.npm.taobao.org  ,然后等待,没报错表示安装成功,(我的已经安装过了,显示更新成功的信息),如下图:

                

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

          3) 安装vue-cli 脚手架构建工具

               

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

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

     

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

             

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

            

     

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

         

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

          

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

          

        介绍一下目录及其作用:

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

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

         node_modules:npm 加载的项目依赖模块。

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

                 assets:放置一些图片,如logo等

                 components:目录里放的是一个组件文件,可以不用。

                 App.vue:项目入口文件,我们也可以将组件写这里,而不使用components目录。

                main.js :项目的核心文件

         static:静态资源目录,如图片、字体等。

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

          .XXXX文件:配置文件。

         index.html:首页入口文件,可以添加一些meta信息或者同统计代码啥的。

         package.json:项目配置文件。

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

      

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

        安装项目所需要的依赖:执行 cnpm install   (这里可以用cnpm代替npm了)

        

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

        

     

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

        

       运行项目

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

        

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

      

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

         

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

        点击可查看更多相关的内容,戳戳戳http://blog.csdn.net/m0_37479246/article/list

    展开全文
  • Vue进阶(三十六):vue.js中created方法的使用详解

    万次阅读 多人点赞 2019-01-30 14:36:54
    这次给大家带来vue.js中created方法的使用详解,使用vue.js中created方法的注意事项有哪些,下面就是实战案例,一起来看一下。这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数。一个vue实例被...

    这次给大家带来vue.js中created方法的使用详解,使用vue.js中created方法的注意事项有哪些,下面就是实战案例,一起来看一下。

    这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数。一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中。每一个阶段都会有一个钩子函数,方便开发者在不同阶段处理不同逻辑。

    一般可以在created函数中调用ajax获取页面初始化所需的数据。

    实例生命周期

    每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些 生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会。例如,created 这个钩子在实例被创建之后被调用:

    var vm = new Vue({
    data: {
    a: 1
    },
    created: function () {
    // `this` 指向 vm 实例
    console.log(&#39;a is: &#39; + this.a)
    }
    })
    

    也有一些其它的钩子,在实例生命周期的不同阶段调用,如 mounted、 updated 、destroyed 。钩子的 this 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念?答案是,没有。组件的自定义逻辑可以分布在这些钩子中。

    生命周期图示

    下图说明了实例的生命周期。你不需要立马弄明白所有的东西,不过以后它会有帮助。

    补充:

    Vue生命周期中mounted和created的区别

    一、什么是生命周期?

    用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨,但是也基本上可以理解。

    通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下created和mounted的区别:

    二、created和mounted区别?

    官方图解如下:

    我们从图中看两个节点:

    created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。

    mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

    其实两者比较好理解,通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步,而如果你写入组件中,你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。下面看一个例子(用组件)。

    三、例子

    Vue.component("demo1",{ 
      data:function(){ 
       return { 
    	    name:"", 
    	    age:"", 
    	    city:""
       } 
      }, 
      template:"<ul><li id='name'>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>", 
      created:function(){ 
    	   this.name="唐浩益"
    	   this.age = "12"
    	   this.city ="杭州"
    	   var x = document.getElementById("name")//第一个命令台错误 
    	   console.log(x.innerHTML); 
      }, 
      mounted:function(){ 
       var x = document.getElementById("name")/</span>/第二个命令台输出的结果<span style="font-size: 14px;"> 
       console.log(x.innerHTML); 
      } 
     }); 
     var vm = new Vue({ 
      el:"#example1"
     })
    

    可以看到输出如下:

    可以看到都在created赋予初始值的情况下成功渲染出来了。

    但是同时看console台如下:

    可以看到第一个报了错,实际是因为找不到id,getElementById(ID) 并没有找到元素,原因如下:

    在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素

    而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,故输出了结果“唐浩益”。

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    Angular4的router使用详解

    webpack的4.0打包优化如何实现

    展开全文
  • 遇见 vue.js --------阿文的vue.js学习笔记(1)-----初识vue.js 遇见 vue.js --------阿文的vue.js学习笔记(2—1)----- 基本使用 [1] 遇见 vue.js --------阿文的vue.js学习笔记(2—2)----- 基本使用 [2] … …...
  • 整合springboot+vue.js--安装vue.js

    千次阅读 2019-04-29 20:52:32
    业余时间想整理一个基于springboot2.x+mybatis+redis(二级缓存)+vue.js的小系统,随着工作经验的增加慢慢去完善它 废话不多说,安排一个node.js,回归最老版的命令行编码! vue.js是什么?为什么要使用它? Vue.js...
  • 在官网上下载vue.js或者是vue.min.js。并用&lt;script&gt;标签引入。下载网址是https://vuejs.org/v2/guide/installation.html。 进入官网后,点击下载这两个,其中这两个有一个是vue.js 有一个是vue.min...
  • vue.js介绍及vue.js优缺点

    万次阅读 2018-10-25 20:53:18
    什么是vue.js Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或...
  • Vue.js Vue.js的官方文档中是这样介绍它的:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。 简单小巧是指Vue.js压缩后仅有17KB。所谓渐进式(Progressive),就是我们可以一步一步、有阶段性地来使用Vue....
  • vue.js资源汇总,vue.js教程大全

    万次阅读 2016-09-13 08:18:35
    Vue.js 的一些资源索引 vue资料入门类 vue 快速入门 Vue.js 中文系列视频教程 on Laravist英文教程 Learning Vue 1.0: Step By Step社区 sf - vue标签 知乎 - vue标签 Vue.js专业中文社区 vue - issues二. ...
  • Vue.js(一) Vue.js + element-ui 扫盲

    万次阅读 多人点赞 2018-12-09 20:32:59
    一:node.js是什么 我们知道javascript代码只能在浏览器上运行,只有浏览器能够解析js代码,如果想要javascript代码能够在服务器端运行就必须提供一个Javascript的运行环境(runtime environment),这就是node.js。 ...
  • Vue第二篇之在HTML中引入Vue.js,快速使用Vue

    万次阅读 多人点赞 2018-10-16 11:19:27
    直接在html文件中引入vue.js开始学习,了解vue的基础指令,和整个vue实例的基础架构。 下载vue.js 地址:https://download.csdn.net/download/qq_31122833/10723310,下载完之后在HTML中加入v...
  • vue.js视频教程,vue.js视频教程下载

    万次阅读 2016-09-14 07:23:05
    好不容易找到的资源,分享给大家,视频清晰。...第二套视频在我的另一篇博文中也有提到的vue.js资源汇总,vue.js教程大全,现也一并整理出来方便大家学习。vue.js视频教程百度云盘下载 Vuejs 1.0 系列教程
  • 2017最新vue.js1.0/vue.js2.0视频教程共12套有需要加我Q:1139721002备注来意 可以关注微信公众号搜索:cityapes或者搜索:城市一猿 点击菜单的vue.js就可以下载了 ...
  • 遇见 vue.js --------阿文的vue.js学习笔记(1)-----初识vue.js 遇见 vue.js --------阿文的vue.js学习笔记(2—1)----- 基本使用 [1] 遇见 vue.js --------阿文的vue.js学习笔记(2—2)----- 基本使用 [2] … …...
  • Vue.js教程-目录

    万次阅读 多人点赞 2020-08-03 15:18:52
    Vue.js教程-目录简介章节列表 简介 本目录作为Vue教程的首页,所以会持续更新。 如果某篇章节中有错误的地方,希望大家能够指出来,我会更正,私信和评论里说都可以,不懂的地方也可以说,如果我也不会那就请教一下...
  • vue.config.js 是webpack的配置文件 vue.config.js是一个可选的配置文件,如果项目的 (和package.json同级的) 根目录中存在这个文件,那么它会被@vue/cli-service自动加载。你也可以使用package.json中的vue字段,...
  • Vue.js 2.0之全家桶系列视频课程

    万人学习 2018-04-21 16:52:25
    基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿! 1. 包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等) 2. 采用笔记+代码案例的形式讲解,...
  • 策划列表相关的vue.js可畏的事 资源 官方资源外部资源工作门户社区会议播客官方的例子教程实例书 项目采用vue.js 开源商业产品应用/网站互动体验企业使用 组件&图书馆 用户界面组件 表通知...
  • 基于 Vue.js 2.0 的 UI 组件库快速开发一个 Vue.js Web 应用 Element UI 视频教程   下载地址;百度网盘
  • 首先vue.js 是库,不是框架,不是框架,不是框架。 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据...
  • 然后可以根据下文去操作即可,请注意最后的温馨提示哦 前面的文章我们为大家介绍了Vue的安装、实践,工欲善其事必...Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏
  • 刚开始使用vue的时候发现vue报vue.js:597 [Vue warn]: Cannot find element: #app的错误,初始以为是写的代码有错误导致,于是认真的对照了几遍发现代码和官网的一模一样。代码都一样了,那就排除了是代码愿意导致...
  • Node.js 和 Vue.js 的区别

    千次阅读 2019-03-19 09:42:44
    Node.js 和 Vue.js 的区别 完全两码事,一个是前端框架,一个是服务端语言。 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。 ...
  • A curated list of awesome things related to Vue.js Resources Official ResourcesExternal ResourcesJob PortalCommunityConferencesPodcastsOfficial ExamplesTutorialsExamplesBooks Projects Using V
  • Vue.js的使用

    万次阅读 2019-11-04 10:09:50
    Vue.js的的使用:Axios、vue-router、vuex......
  • 解决Vue.js not detected的问题

    万次阅读 多人点赞 2018-05-03 20:19:13
    前几天遇到了一个问题,在安装完Vue.js devtools后,打开自己写的一个vue.js网页,发现这个图标并没有亮起来,还是灰色,点击图标显示Vue.js not detected,打开控制台也没有发现有vue的选项 网上找了很多解决方案都...
  • 使用Vue.js和Element-UI做一个简单的登录页面
  • 初试Vue.js+Require.js

    千次阅读 2019-06-26 11:20:56
    Vue.js 是现在比较流程的视图层的框架,Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。 而Rquire.js 则是实现js文件的异步加载,避免网页失去响应。管理模块之间的依赖性,便于...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 146,479
精华内容 58,591
关键字:

vue.js

vue 订阅