对于Vue的学习,我一开始就是在官网上看看API,后来越看越迷糊,干脆直接先搭起来一个项目边实践边学习吧,每个人都有自己适合的学习方法,直接开始我搭建项目的过程和心得。
首先你电脑得有node,我在搭建项目的时候使用的是vue-cli,这个就是一个脚手架他可能有很多用途,我目前就使用这个来快速的搭建一个新的vue项目,安装命令 npm install --global @vue/cli 这是官方推荐的安装命令(这种方式需要的node版本目前是7以上,如果node版本太低需要升级,如果你安装了n模块可以直接使用 sudo n stable 直接升级,不然需要先npm install -g n安装一下),命令好多只要能安装上就可以,我在安装的时候不知道是网络原因吗有个包下载不下来,我使用了淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完毕以后我们就可以创建项目了 直接 vue create project-name(项目名字)
有选项就直接yes就好了,可以看到结束以后在文件下生成了cvm文件夹,打开看里面的内容
在控制台进入cvm目录下,然后 npm run serve
浏览http://localhost:8080/ 就可以看到项目了。
-------------------------------------------分割线-----------------------------------------------
再来另一种方式 npm install --global vue-cli 安装,然后使用命令 vue init webpack cvm
![](/qrcode.jpg)
可以看到许多选项看名字不难理解,但是有个 ESLint,我建议刚开始像我这种菜鸡别选要是老司机随意,这个是检验你代码格式,并不是我写的代码太乱,真的是阿岳老师太严格了。其余的选项直接继续就可以了,他会帮你安装一些依赖文件,等一等就OK了。国际惯例先看看文件夹下都有啥
推荐大家使用WebStorm或者Visual Studio Code,后者是免费。先来做一个简单的例子
首先在/cvm/src/components 下创建一个 login.vue文件,代码如下
<template>
<form>
<label>用户名</label>
<input type="text"/>
<label>密码</label>
<input type="password"/>
<input type="submit" value="登录"/>
</form>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style>
</style>
然后打开/cvm/src/router/index.js 文件 修改代码如下
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import login from '@/components/login'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},{
path: '/login',
name: 'login',
component: login
}
]
})
这个时候我们打开控制台来到项目目录下 npm run dev,项目启动成功以后访问http://localhost:8081/#/login就可以看到我们的页面,有点丑希望大家不要介意,毕竟我们要的是有趣的灵魂,而不是好看看的皮囊,哈哈我就是不想写样式。