Vue建立項目配置

前言

　　安裝VS Code，開始vue的學習及編程，可是老是遇到各類各樣的錯誤，控制檯語法錯誤，格式錯誤。一股腦的襲來，感受建立個項目怎麼這個麻煩。這裏就講一下vue的安裝及建立。

安裝環境

　　固然第一步仍是先下載VS  Code咯。而後傻瓜式的安裝一步接一步的進行下去就完事。而後打開進入VS  Code，這裏會提醒你，有些配置可能須要重啓以後纔會生效，這個看你我的的安排。也能夠最後進行重啓。

1、中文語言環境安裝

　　一、使用快捷鍵組合【Ctrl+Shift+p】，在搜索框中輸入「configure display language」，點擊肯定後選擇zh-cn.

　　二、若是沒有zh-cn選項，咱們就【Ctrl+Shift+X】打開擴展窗口搜索Chinese進行安裝。

　　三、在返回搜索框去設置，而後重啓VS Code

 　　　　　　

 

2、vetur插件的安裝

　　這個插件是vue文件基本語法高亮顯示的插件。點擊【Ctrl+Shift+X】打開插件擴展窗口搜索vetur進行安裝。安裝完成以後須要在配置文件中進行配置。

 

　　　　　　 

 

 

　　文件=>首選項=>設置=>經常使用設置=>settings.json中添加一下配置。

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

 

3、eslint插件的安裝

　　Eslint 是一個智能錯誤檢測的插件，這個插件在實際開發中可能會發揮極其很重要的做用。可以幫咱們及時的發現錯誤。按照上面哪一步去插件擴展窗口搜索eslint進行安裝，而後在相同的位置進行配置。

"eslint.validate": [

"javascript",

"javascriptreact",

"html",

"vue"

],

 

"eslint.options": {

"plugins": ["html"]

}

 

　　最終兩個插件安裝完成以後配置以下。

 

　　　　　　 

 

開始建立項目

　　想要學好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的環境搭建。最後達到能夠建立項目運行項目的目的。而後能夠經過修改路由來顯示登陸頁面。這一篇算是比較完善完整的基礎入門篇了。

 

　　　　　　永遠都不要中止微笑，即便是在你難過的時候，說不定哪一天有人會由於你的笑容面愛上你。

---

 

歡迎你們掃描下方二維碼，和我一塊兒學習更多的知識

回覆"代理"便可得到

Shadowrocket代理工具

回覆"服務器"便可得到

SS/SSR免費帳號