前言

  安装VS Code,开始vue的学习及编程,但是总是遇到各种各样的错误,控制台语法错误,格式错误。一股脑的袭来,感觉创建个项目怎么这个麻烦。这里就讲一下vue的安装及创建。

安装环境

  当然第一步还是先下载VS  Code咯。然后傻瓜式的安装一步接一步的进行下去就完事。然后打开进入VS  Code,这里会提醒你,有些配置可能需要重启之后才会生效,这个看你个人的安排。也可以最后进行重启。

一、中文语言环境安装

  1、使用快捷键组合【Ctrl+Shift+p】,在搜索框中输入“configure display language”,点击确定后选择zh-cn.

  2、如果没有zh-cn选项,我们就【Ctrl+Shift+X】打开扩展窗口搜索Chinese进行安装。

  3、在返回搜索框去设置,然后重启VS Code

      

二、vetur插件的安装

  这个插件是vue文件基本语法高亮显示的插件。点击【Ctrl+Shift+X】打开插件扩展窗口搜索vetur进行安装。安装完成之后需要在配置文件中进行配置。

       

  文件=>首选项=>设置=>常用设置=>settings.json中添加一下配置。

"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},

三、eslint插件的安装

  Eslint 是一个智能错误检测的插件,这个插件在实际开发中可能会发挥极其很重要的作用。能够帮我们及时的发现错误。按照上面哪一步去插件扩展窗口搜索eslint进行安装,然后在相同的位置进行配置。

"eslint.validate": [

"javascript",

"javascriptreact",

"html",

"vue"

],

"eslint.options": {

"plugins": ["html"]

}

  最终两个插件安装完成之后配置如下。

       

开始创建项目

  想要学好vue,那么npm命令是必不可少的。

一、安装node.js

  Vue,npm都是基于node.js的,所以这里我们先安装node.js

  进入node.js官网,点击下载windows版本的。

       

  然后根据步骤一步步安装就行了。然后打开CMD命令窗口进行检查。

Node -v

Npm -v

  分别检查node的版本及npm的版本

       

二、安装Vue.js

  安装vue这里我们使用NPM方法进行安装,打开命令行窗口。

  安装最新稳定版本vue

 npm install vue

  全局安装 vue-cli

npm install --global vue-cli

  到这里我们基本环节配置差不多就ok了。

  接下来呢我们就可以开始创建项目了。

三、创建项目

1、首先我们创建一个文件夹(VueWeb)用来专门存放我们的vue项目。

2、打开命令行窗口或者VS Code的终端,然后定位到刚创建的文件夹下。

3、然后使用vue init webpack myweb命令开始创建项目。

       

? Project name (myweb)  vue   ---------------------项目名称,这里注意是不允许出现大写字母的。

 

? Project description (A Vue.js project) myweb   ---------------------项目描述

 

? Author super  --------------------- 项目创建者

 

? Vue build (Use arrow keys)  直接回车 出现  ? Vue build standalone

 

? Install vue-router? (Y/n)  Yes  --------------------- 是否安装Vue路由,通过路由控制页面跳转

 

? Use ESLint to lint your code? (Y/n)  No ---------------------是否启用eslint检测规则,这里我建议选择No,不然后面会出现各种语法不同的问题,让我有点不适应。

? Setup unit tests? (Y/n)  Yes ---------------------是否安装程序的单元测试

 

? Pick a test runner?  回车默认  ---------------------选择一个测试工具

 

? Setup e2e tests with Nightwatch? (Y/n)  Yes------------ 是否使用npm进行安装刚的配置

  然后等待完毕,我们就可以打开VS Code然后打开刚刚我们创建的Vue项目。

四、 运行项目

  打开刚刚创建的Vue项目终端后,我们就可以进行运行项目前的最后几步了。

1、运行npm install命令进行相关依赖的安装。

2、然后使用 npm run dev运行项目,接下来就出现了一个网址,我们点击访问就是我们刚刚创建的项目了。

     

3、现在我们继续对项目进行修改,创建一个Login登录页面。

     

4、在src目录下新建Login文件夹及Login.vue文件并添加代码(这里注意主体代码和style和script中间是需要空一行的)

<template>
    <div>
         <div class="login-wrap" v-show="showLogin">
            <h3>登录</h3>
            <p v-show="showTishi">{{tishi}}</p>
            <input type="text" placeholder="请输入用户名" v-model="username">
            <input type="password" placeholder="请输入密码" v-model="password">
            <button v-on:click="login">登录</button>
            <span v-on:click="ToRegister">没有账号?马上注册</span>
        </div>

        <div class="register-wrap" v-show="showRegister">
            <h3>注册</h3>
            <p v-show="showTishi">{{tishi}}</p>
            <input type="text" placeholder="请输入用户名" v-model="newUsername">
            <input type="password" placeholder="请输入密码" v-model="newPassword">
            <button v-on:click="register">注册</button>
            <span v-on:click="ToLogin">已有账号?马上登录</span>
        </div>
    </div>
</template>

<style>
    .login-wrap{text-align:center;}
    input{display:block; width:250px; height:40px; line-height:40px; margin: auto; margin-bottom: 10px; outline:none; border:1px solid #; padding:10px; box-sizing:border-box;}
    p{color:red;}
    button{display:block; width:250px; height:40px; line-height: 40px; margin: auto; border:none; background-color:#41b883; color:#fff; font-size:16px; margin-bottom:5px;}
    span{cursor:pointer;}
    span:hover{color:#41b883;}
</style>

<script>
    export default{
        data () {
            return {
                showLogin: true,
                showRegister: false,
                showTishi: false,
                tishi: '',
                username: '',
                password: '',
                newUsername: '',
                newPassword: ''
            }
        }
    }
</script>

5、然后修改router路由文件下的index.js

  新增

import Login from '@/Login/Login'

  修改routes:

 

routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]

6、运行项目 npm run dev

       

总结

  本篇文章主要讲述VS Code 安装及环境的搭建,还有vue及node.js的环境搭建。最后达到可以创建项目运行项目的目的。然后可以通过修改路由来显示登录页面。这一篇算是比较完善完整的基础入门篇了。

      永远都不要停止微笑,即使是在你难过的时候,说不定哪一天有人会因为你的笑容面爱上你。


欢迎大家扫描下方二维码,和我一起学习更多的知识

  

Vue创建项目配置的更多相关文章

  1. redis数据库-VUE创建项目

    redis数据库 ''' 关系型数据库: mysql, oracle 非关系型数据库(nosql): redis,mongodb (没有表的概念) key-value mongodb: json 数据 ...

  2. vue 创建项目

    先安装node.js环境 #先安装npm 阿里镜像 (之后cnpm 下载组件快速) npm install -g cnpm --registry=https://registry.npm.taobao ...

  3. vue自学入门-2(vue创建项目)

    本人也是刚学习VUE,边找资料,边学习,边给大家分享.1.创建项目 2.启动项目 3.注意上面和下面全部用cnpm

  4. Vue + webpack 项目配置化、接口请求统一管理

    准备工作 需求由来: 当项目越来越大的时候提高项目运行编译速度.压缩代码体积.项目维护.bug修复......等等成为不得不考虑而且不得不做的问题.  又或者后面其他同事接手你的模块,或者改你的bug ...

  5. vue 创建项目的命令

    1 cmd   创建项目 找到指定目录 vue create test   或   vue ui  (可视化创建)推荐 ---------------------------------------- ...

  6. Django学习笔记(一)——安装,创建项目,配置

    疯狂的暑假学习之 Django学习笔记(一) 教材  书<The Django Book> 视频:csvt Django视频 1.创建项目 django‐admin.py startpro ...

  7. Vue+webpack项目配置便于维护的目录结构

    新建项目的时候创建合理的目录结构便于后期的维护是很重要 环境:vue.webpack 目录结构: 项目子目录结构 子目录结构都差不多,主要目录是在src下面操作 src目录结构 src/common ...

  8. Opencv不用每次创建项目配置vs2010 vc++目录 库目录等项

    可以设置成编译器的环境配置,VS2010相对其他版本虽然去掉了编译器配置 但可以通过属性管理器配置编译器环境. 设置对应的vc++目录 链接器就可以了,这样就是对整个编译器配置了 下次就不用再配了.

  9. 2.vue脚手架项目配置

    1.更改网站名: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  10. 安装Vue和创建一个Vue脚手架项目

    首先 安装node.js,安装成功可以在控制台输入[node --version ]查看node的版本,因为安装了node会自带npm所以我们可以用 [npm --version]查到npm版本  如 ...

随机推荐

  1. 基于dubbo的分布式项目实例应用

    本文主要学习dubbo服务的启动检查.集群容错.服务均衡.线程模型.直连提供者.只定阅.只注册等知识点,希望通过实例演示进一步理解和掌握这些知识点. 启动检查 Dubbo缺省会在启动消费者时检查依赖的 ...

  2. oracle分组查询实例ORA-00979和ORA-00937错误分析

    select J.ZWJGH,J.CZZXBH,J.JZZT,J.CWNY,J.JZPZH sum(J.FSE)<!-- 聚合函数字段没在分组条件中--> from JZPZXX J &l ...

  3. sql-labs 分享

    前段时间在网上发现了一个阿三同学托管在github上的sql注入入门科普项目,感觉挺不错,在此分享一下.虽然现在有很多工具比如sqlmap可以实现自动化的sql注入,但是个人感觉如果只知其然而不知其所 ...

  4. moment 和ko 绑定msdate格式的日期值(静态text)

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  5. 通过缓存数据库结果提高PHP性能(转)

    众所周知,缓存数据库查询的结果可以显著缩短脚本执行时间,并最大限度地减少数据库服务器上的负载.如果要处理的数据基本上是静态的,则该技术将非常有效.这是因为对远程数据库的许多数据请求最终可以从本地缓存得 ...

  6. J2SE知识点摘记(二十)

    List 1.3.1        概述 前面我们讲述的Collection接口实际上并没有直接的实现类.而List是容器的一种,表示列表的意思.当我们不知道存储的数据有多少的情况,我们就可以使用Li ...

  7. PHP中使用正则表达式详解 preg_match() preg_replace() preg_mat

    PHP中嵌入正则表达式常用的函数有四个: 1.preg_match() :preg_match() 函数用于进行正则表达式匹配,成功返回 1 ,否则返回 0 . 语法:int preg_match( ...

  8. 2017-3-5 C#基础 函数

    函数/方法:非常抽象独立完成某项功能的一个个体 函数的作用: 提高代码的重用性提高功能开发的效率提高程序代码的可维护性 函数分为: 固定功能函数高度抽象函数 函数四要素:输入,输出,函数体,函数名 p ...

  9. UNIX文件I/O

    第一次用markdown语法写博客,写出来的还比较整齐,感觉博客园对序号的支持不是很好,调了一会才有了比较满意的效果,还有有哪位知道使用markdown如何插入frame? 这边博客主要说了APUE中 ...

  10. Linux常用操作命令(一)

    java程序员要学习一些linux知识 java程序员要学习一些linux知识,下面就是您要学的命令:大型J2EE应用都在建构在linux环境下的.开发环境下我们可以通过samba映射成本地的网络驱动 ...