Vue建立项目配置

时间 2019-11-14

标签 vue 建立项目配置繁體版

原文原文链接

前言

　　安装VS Code，开始vue的学习及编程，可是老是遇到各类各样的错误，控制台语法错误，格式错误。一股脑的袭来，感受建立个项目怎么这个麻烦。这里就讲一下vue的安装及建立。javascript

安装环境

　　固然第一步仍是先下载VS Code咯。而后傻瓜式的安装一步接一步的进行下去就完事。而后打开进入VS Code，这里会提醒你，有些配置可能须要重启以后才会生效，这个看你我的的安排。也能够最后进行重启。html

1、中文语言环境安装

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

　　二、若是没有zh-cn选项，咱们就【Ctrl+Shift+X】打开扩展窗口搜索Chinese进行安装。java

　　三、在返回搜索框去设置，而后重启VS Codenode

2、vetur插件的安装

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

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

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

3、eslint插件的安装web

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

"eslint.validate": [

"javascript",

"javascriptreact",

"html",

"vue"

],

 

"eslint.options": {

"plugins": ["html"]

}

　　最终两个插件安装完成以后配置以下。vue-cli

开始建立项目

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

1、安装node.js

　　Vue,npm都是基于node.js的，因此这里咱们先安装node.js

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

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

Node -v

Npm -v

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

2、安装Vue.js

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

　　安装最新稳定版本vue

　npm install vue

　　全局安装 vue-cli

npm install --global vue-cli

　　到这里咱们基本环节配置差很少就ok了。

　　接下来呢咱们就能够开始建立项目了。

3、建立项目

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

二、打开命令行窗口或者VS Code的终端，而后定位到刚建立的文件夹下。

三、而后使用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项目。

4、运行项目

　　打开刚刚建立的Vue项目终端后，咱们就能够进行运行项目前的最后几步了。

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

二、而后使用 npm run dev运行项目，接下来就出现了一个网址，咱们点击访问就是咱们刚刚建立的项目了。

三、如今咱们继续对项目进行修改，建立一个Login登陆页面。

四、在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:0 auto; margin-bottom: 10px; outline:none; border:1px solid #888; padding:10px; box-sizing:border-box;}
    p{color:red;}
    button{display:block; width:250px; height:40px; line-height: 40px; margin:0 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>

五、而后修改router路由文件下的index.js

　　新增

import Login from '@/Login/Login'

　　修改routes：

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

六、运行项目 npm run dev

总结

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

　　　　　　永远都不要中止微笑，即便是在你难过的时候，说不定哪一天有人会由于你的笑容面爱上你。