精华内容
下载资源
问答
  • vue新手教程

    千次阅读 2019-06-20 11:57:50
    然后下面那个框就要选择了,是否要安装vue-router(vue全家桶中的路由模块),一般是需要的,所以输入Y, 在下面的就是一些代码检查,测试什么的,我都是选择no,因为麻烦。OK继续回车看到如下 项目初始化成功...

    1、下载Nodejs并安装
    http://nodejs.cn/download/
    下载安装完了之后到cmd里面运行一下命令

    node

    在这里插入图片描述
    看到没,可以node回车之后,可以像chrome的console面板一样去执行命令。

    2、安装淘宝镜像

    node安装完毕,自带npm(NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题),

    但是,你身处“天朝”,要加载国外的包,那是要慢成狗,所以这里推荐安装淘宝镜像(安装完后npm 都可以用cnpm代替了),命令如下

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

    3、安装vue脚手架vue-cli

    到这里你就可以安装脚手架准备初始化一个项目了,脚手架的安装很简单

    cnpm install vue-cli -g

    这里的 -g 是全局安装

    4、项目初始化

    注意接下来你将看到自己的真正的项目了,先cd到你的项目目录这里假设你的目录是

    d:workspace/

    然后执行

    vue init webpack myproject

    这里的myproject是你的项目名字,随便叫啥,当然也可以用简装版

    vue init webpack-simple myproject

    回车后会看到这些
    在这里插入图片描述
    很简单,不懂啥意思的话就查词典去,就是一些项目名称,描述,作者之类的,你可以修改也可以直接回车忽略,

    然后下面那个框就要选择了,是否要安装vue-router(vue全家桶中的路由模块),一般是需要的,所以输入Y,

    在下面的就是一些代码检查,测试什么的,我都是选择no,因为麻烦。OK继续回车看到如下
    在这里插入图片描述
    项目初始化成功了

    5、运行项目

    按照上面那个红色框的提示,先cd到你的项目目录,这里是test ,也就是

    cd test

    进来后安装依赖,执行(下面我们用到cnpm了哦,因为快)

    cnpm install

    在这里插入图片描述
    酱紫就安装完毕了,接下来就是见证奇迹的时刻,执行命令,开始运行你的项目

    cnpm run dev

    在这里插入图片描述
    完成,浏览器自动打开了你这个路径
    在这里插入图片描述
    恭喜你,你的demo就这样完成了

    展开全文
  • 刚开始学习vuejs,将相关vue环境的搭建步骤整理如下,供新手们参考:第一步:安装node环境要使用vue来开发前端框架,首先要有node环境,所以要先下载安装nodejs,官网下载地址为:http://nodejs.cn/download/若安装...

    刚开始学习vuejs,将相关vue环境的搭建步骤整理如下,供新手们参考:

    第一步:安装node环境

    要使用vue来开发前端框架,首先要有node环境,所以要先下载安装nodejs,官网下载地址为:http://nodejs.cn/download/

    若安装成功,则在命令行输入node -v 会显示node版本


    2.安装npm的淘宝镜像

    node环境安装完成后,自带了包管理器npm,可以通过 npm install 命令安装项目需要的依赖项,不过可能下载速度会比较慢,

    可以安装国内的淘宝镜像,安装命令为: > npm install -g cnpm –registry=https://registry.npm.taobao.org

    以后用到npm的地方直接用cnpm来代替就好了

    3.安装全局vue-cli脚手架

    之所以要用vue-cli,是应为这个工具能帮我们搭建好我们需要的模板框架,比较简单。

    安装方法,在命令行输入 cnpm install -g vue-cli 回车


    安装成功后,在命令行中输入vue,出来vue的信息说明安装成功

    4.初始化项目

    安装完脚手架以后便可以开始创建一个基于webpack的新项目:命令 vue init webpack myfirstVue

    最后的myfirstVue为项目方件夹名

    5.安装项目myfirstVue的环境依赖

    用命令进入到项目文件夹>cd myfirstVue,然后输入cnpm install,安装完成后会发现项目文件夹中会多出一个node_modules的子文件夹,里面就是刚才安装的所有依赖


    6.项目启动运行

    准备工作做好以后,测试一下项目里面默认的app.vue模块能否跑起来,这是需要先安装一下服务器环境,在命令行中输入cnpm run dev 回车即可



    项目成功启动后,根据提示“Your application is running here:http://localhost:8080”

    在浏览器地址栏中输入http://localhost:8080会发现默认的模块打开了





    展开全文
  • 上一篇文章讲到vue项目在搭建好后可以通过npm run dev命令可以启动并在浏览器中访问,但这种方式只是启动开发环境,那么怎么将项目发布到生产环境呢?需要以下三个步骤: 1.编译vue项目 操作命令:npm run build ...

    上一篇文章讲到vue项目在搭建好后可以通过npm run dev命令可以启动并在浏览器中访问,但这种方式只是启动开发环境,那么怎么将项目发布到生产环境呢?需要以下三个步骤:

    1.编译vue项目

    操作命令:npm run build

    编译成功后会自动生成dist目录 (包括了static子目录以及index.html文件)

    2.安装web服务器tomcat

    3.将编译后的文件放到tomcat服务器

    将整个dist目录下拷贝到tomcat安装目录下的webapps下

    部署完成,启动 tomcat,浏览器中输入http://localhost:8080/dist

     

    访问时遇到的问题:

    若浏览器出现空白,可能是静态资源路径问题,通过以下方式可以解决:

    打开vue项目的config/index.js文件,找到build节点下面的assetsPublicPath参数

    将绝对路径 '/' 改为相对路径 './'(斜杠前面加个点),重新使用npm run build命令进行编译并复制到tomcat目录下替换旧文件

     

    展开全文
  • 主要给大家分享了一个写给vue新手看的vue渲染页面教程,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,感兴趣的朋友们下面随着小编来一起学习学习吧。
  • Vue新手入门教程

    2019-07-02 15:22:00
    谈谈我对Vue的理解 vue就是前端上的Java,前端上的C#。有个前端的虚拟DOM引擎,设计理念和Java,C#类似。我们只需要告诉DOM应该显示什么,而不用去操作DOM元素。 如何引用? 下面是一个helloWord,大家运行感受...

    谈谈我对Vue的理解

    vue就是前端上的Java,前端上的C#。有个前端的虚拟DOM引擎,设计理念和Java,C#类似。我们只需要告诉DOM应该显示什么,而不用去操作DOM元素。

    如何引用?

    下面是一个helloWord,大家运行感受一下。

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
        <meta charset="utf-8">
    </head>
    <body>
    <div id="app">
        <!--使用 v-cloak能够解决插值闪烁问题-->
        <p>{{msg}}</p>
        
    </div>
    <script type="text/javascript">
        //VM层
        var vm = new Vue({
            el:'#app',//表示,当前我们new这个vue的实例,要控制页面上的哪个区域
            //M层
            data:{//data属性中存放的是el中要用的数据
                msg:'HelloWorld'//通过Vue提供的指令,很方便的就能把数据渲染到页面上,程序员不用再操作dom元素了。
            }
        })
    </script>
    </body>
    </html>

    运行效果如下:

    这里当导入了vue.js库后,里面会有个Vue的构造器,对应着div。vue构造器中里面的el绑定div,data绑定数据。

    解决闪烁问题:

    相信新手都遇到过这个问题:

    能看到{{msg}}是不是很没有B格?

    这时候加个v-cloak属性即可解决

    代码如下:有注释肯定能看懂。

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    
        <meta charset="utf-8">
        <style type="text/css">
            [v-cloak]{
                display:none;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <!--使用 v-cloak能够解决插值闪烁问题-->
        <p v-cloak>{{msg}}</p>
    
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script type="text/javascript">
        //VM层
        
        var vm = new Vue({
            el:'#app',//表示,当前我们new这个vue的实例,要控制页面上的哪个区域
            //M层
            data:{//data属性中存放的是el中要用的数据
                msg:'欢迎学习Vue'//通过Vue提供的指令,很方便的就能把数据渲染到页面上,程序员不用再操作dom元素了。
            }
        })
    </script>
    </body>
    </html>

     

    这时候就看不见{{msg}}了

    v-bind指令:

    v-bind是vue中提供的用于绑定属性的指令实例代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
        <meta charset="utf-8">
        <style type="text/css">
            [v-cloak]{
                display:none;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <!--使用 v-cloak能够解决插值闪烁问题-->
        <p v-cloak>{{msg}}</p>
        <input type="button" v-bind:value="value">
    </div>
    <script type="text/javascript">
        //VM层
        
        var vm = new Vue({
            el:'#app',//表示,当前我们new这个vue的实例,要控制页面上的哪个区域
            //M层
            data:{//data属性中存放的是el中要用的数据
                msg:'欢迎学习Vue'//通过Vue提供的指令,很方便的就能把数据渲染到页面上,程序员不用再操作dom元素了。
                ,value:'按钮'
            }
        })
    </script>
    </body>
    </html>

    运行结果:

    可以看到bind能够绑定属性值。

    原理:v-bind会把原属性值变成js变量解析。

    注意:v-bind指令可以被简写位:要绑定的属性

    v-bind中可以写合法的js表达式。

    v-on指令:

    Vue中提供了v-on事件绑定机制。

    示例代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
        <meta charset="utf-8">
        <style type="text/css">
            [v-cloak]{
                display:none;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <!--使用 v-cloak能够解决插值闪烁问题-->
        <p v-cloak>{{msg}}</p>
        <input type="button" v-bind:value="value" v-on:click="show">
    </div>
    <script type="text/javascript">
        //VM层
        
        var vm = new Vue({
            el:'#app',//表示,当前我们new这个vue的实例,要控制页面上的哪个区域
            //M层
            data:{//data属性中存放的是el中要用的数据
                msg:'欢迎学习Vue'//通过Vue提供的指令,很方便的就能把数据渲染到页面上,程序员不用再操作dom元素了。
                ,value:'按钮'
            },
            methods:{//这个methods属性中定义了当前Vue实例所有可用的方法
                show: function(){
                    alert("Hello");
                }
            }
        })
    </script>
    </body>
    </html>

     

     截止如下: 我们掌握了如何定义一个基本的Vue代码结构,插值表达式,v-cloak,v-html,v-bind v-on 。

     

    展开全文
  • vue2.0新手教程

    2019-05-15 20:00:13
    想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记录的是五分钟搭建vue...
  • vue新手入门详细教程

    2020-04-19 23:02:55
    vue.js vue.js是一套用于构建用户界面的渐进式框架。 Vue的核心:声明式渲染,组件 Vue功能:模板引擎,组件,路由,状态管理器(管理数据–可伸缩性的),自动化构建。 核心基本语法: 第一步:vue.js引入: // ...
  • 说实话都是逼出来的,对于前端没干过ES6都不会的人,vue视频也就看了基础的一些 但没办法,接下来做微服务架构,前端就用 vue,...v4.0.0 版本的调整后讲解:Vue 新手学习笔记:vue-element-admin 之 入门开发教程(...
  • 前言 新建项目近些年前端开发快速发展,现在学习前端已经不像以前那样仅仅学习一个语法就可以了,它已经是一门编程技术了,...Vue是一个前端框架,安装了Nodejs后,可以使用Npm命令直接下载vue。 打开cmd窗口,依次输
  • vue-cli新手教程

    2019-02-27 18:53:25
    使用 npm(不知道npm的同学,可以自行百度,或者看我上面 nvm的安装教程 ) 全局安装 webpack,打开命令行工具输入:npm install webpack -g,安装完成之后输入 webpack -v,如果出现相应的版本号,则说明安装成功。...
  • vue2.0 新手教程(一)

    2017-08-15 16:57:00
    下面记录一下新手从0到1的过程,本文“应该”会持续更新 首先安装vue的运行环境node 1、下载Nodejs并安装(下载传送门) 下载安装完了之后到cmd里面运行一下命令 node 看到没,可以node回车之后,可以像...
  • VuePress 新手搭建教程

    千次阅读 2018-11-06 17:31:03
    什么是VuePress? **vuePress是以vue驱动的主题系统的简约静态网站生成工具**
  • 打开cmd窗口,依次输入如下命令: npm i vue -g npm i vue-cli -g 注:输入【npm i vue -g】下载vue时,尽量使用-g,因为vue的文件中有一些文件是可以vue开头的命令行的,因为-g是下载到环境变量配置的Path地址,...

空空如也

空空如也

1 2 3 4 5 ... 19
收藏数 365
精华内容 146
关键字:

vue新手教程

vue 订阅