序文
VSコード、VUE開始学習とプログラミングをインストールし、常にさまざまなエラーが発生し、コンソールの構文エラー、エラーをフォーマットします。、どのようにこのトラブルの感覚を作成するプロジェクトをヒット秋。ここではVUEの作成とインストールについて話をします。
インストール環境
もちろん、最初のステップは、ダウンロードすることですVSコードを少し。そして、逃げるために段階的に進めるために、インストールをだまします。そして、VSコードに変わり、いくつかの構成は再起動する必要があるかもしれません後に有効にするには、ここを思い出させます、これはあなたの個人的なスケジュールに依存します。最後に、あなたはまた、再起動することができます。
まず、中国の言語環境のインストール
1は、ショートカットキーの組み合わせを使用して、検索ボックスに「表示言語を設定する」と入力し、[Ctrlキー+は+ Pシフト]、[OK]をクリックしますZH-CNを選択します。
2、拡張検索ウィンドウ中国のインストールを開くために、我々は[Ctrl + Shiftキー+ X]なしZH-CNオプションがない場合。
3は、VSのコードを再起動し、検索ボックスを戻すために設けられており、
二、veturプラグインのインストール
このプラグインは、プラグインの基本的な構文の強調表示のVUEは、ファイルを表示します。プラグインの拡張機能がインストールさvetur検索ウィンドウを開くには、[Ctrlキー+ Shiftキー+ X]をクリックしてください。インストールが完了した後、設定ファイルで設定する必要があります。
ファイル=>設定=>設定=>一般設定=> settings.jsonいくつかの設定を追加します。
" emmet.syntaxProfiles " ：{ " VUE-HTML "：" HTML " 、 " VUE "：" HTML " }、
三、eslintプラグインのインストール
Eslintは、実際の開発に非常に重要な役割を果たすことができるインテリジェントなエラー検出プラグインです。それは私たちにエラーを見つけるために時間を助けることができます。検索ウィンドウにどのプラグイン拡張上記のステップによればeslintインストールと同じ位置に構成される。
" eslint.validate " ：[ " ジャバスクリプト" 、 " javascriptreact " 、 " HTML " 、 " VUE " ]、 " eslint.options " ：{ " プラグイン"：[ " HTML " ] }
最後の二つのプラグインのインストールを構成した後、次のように。
プロジェクトの作成を開始
VUEを勉強したい、その後、NPMコマンドが不可欠です。
まず、Node.jsのインストール
Node.jsのに基づいていますNPMヴュー、ので、ここで私たちは、Node.jsのインストール
入力公式サイトのNode.js、窓のダウンロード版をクリックしてください。
次いで、ライン上の実装工程をステップとする方法。そして、チェックするためにCMDコマンドウィンドウを開きます。
ノード- 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: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>
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的环境搭建。最后达到可以创建项目运行项目的目的。然后可以通过修改路由来显示登录页面。这一篇算是比较完善完整的基础入门篇了。
永远都不要停止微笑，即使是在你难过的时候，说不定哪一天有人会因为你的笑容面爱上你。
欢迎大家扫描下方二维码，和我一起学习更多的知识
