Vue项目搭建（2018-08-11）

对于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

可以看到许多选项看名字不难理解，但是有个 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就可以看到我们的页面，有点丑希望大家不要介意，毕竟我们要的是有趣的灵魂，而不是好看看的皮囊，哈哈我就是不想写样式。

Vue项目搭建（2018-08-11）

猜你喜欢