Foreword
Install VS Code, vue start learning and programming, but always encounter a variety of errors, the console syntax errors, formatting errors. Fall hit, a project to create a sense of how this trouble. Here to talk about the creation and installation of vue.
Installation Environment
Of course, the first step is to download the VS Code slightly. Then fool the installation to proceed step by step to get away. Then turn into the VS Code, will remind you here, to take effect after some configurations may need to restart, this depends on your personal schedule. Finally, you can also restart.
First, the Chinese language environment installation
1, use the shortcut key combination [Ctrl + Shift + p], enter "configure display language" in the search box, choose zh-cn click OK.
2, if there is no zh-cn option, we [Ctrl + Shift + X] to open the extended search window Chinese installation.
3, is provided to return the search box, and then restart the VS Code
Two, vetur plug-in installation
This plug-in is a plug-in basic syntax highlighting vue displayed files. Click [Ctrl + Shift + X] to open the search window vetur plug-in extensions installed. You need to be configured in the configuration file after installation is complete.
File => Preferences => Settings => General Settings => settings.json add some configuration.
"emmet.syntaxProfiles": { "vue-html": "html", "vue": "html" },
Three, eslint plug-in installation
Eslint is an intelligent error detection plugin that can play an extremely important role in the actual development. It can help us time to find errors. According to the above step in which plug-in extension to the search window eslint installed and configured in the same position.
"eslint.validate": [ "javascript", "javascriptreact", "html", "vue" ], "eslint.options": { "plugins": ["html"] }
After the final two plug-in installation is configured as follows.
Start creating project
Want to learn vue, then npm command is essential.
First, install node.js
Vue, npm are based on node.js, so here we install node.js
Enter node.js official website , click on the download version of windows.
Then according to step a mounting step on the line. Then open CMD command window to check.
The 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: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的环境搭建。最后达到可以创建项目运行项目的目的。然后可以通过修改路由来显示登录页面。这一篇算是比较完善完整的基础入门篇了。
永远都不要停止微笑，即使是在你难过的时候，说不定哪一天有人会因为你的笑容面爱上你。
欢迎大家扫描下方二维码，和我一起学习更多的知识
