vue配置 简单搭建项目

Vue初次尝试

1、已安装nodejs
2、安装vue3

npm install -g @vue/cli
(1) 将安装包放在 /usr/local 下或者你 node 的安装目录。
(2)可以直接在命令行里使用。

3、使用vue脚手架创建项目

vue init webpack demo1
(1)选中vue-router   为浏览器的请求做路由
(2)选中esLint         编译时检查es6的语法错误
(3)选中npm          项目的包依赖管理工具
(4)在生成的目录下执行： npm run dev  编译后部署到nodejs运行；
(5)在浏览器输入命令行提示的访问地址：   http://localhost:8080   查看是否正常访问

4、生成后的目录架构
—config
—index.js (1) 修改autoOpenBrowser:ture (2)port:8080 指定后台端口；
—package.json 项目信息目录，以及依赖的包定位
—index.html 默认的入口页面
—src 开发的主目录
----components 组件目录 放vue组件
----router
----inidex.js 路由配置==》将浏览器的请求映射给组件处理
5、小目标：使用vue写一个简易的登录功能
(1)在当前项目下安装element-ui

npm i element-ui -S

module目录下出现element-ui依赖包

集成到vue中：
修改main.js:
添加：
//引入element-uid组件
import ElementUI from ‘element-ui’ //必须用单引号否则编译时会报错
//引入样式
import ‘element-ui/lib/theme-chalk/index.css’
//注册到vue中
Vue.use(ElementUI);
（2）在componets目录下新建Login.vue文件，写一个简单的登录模板

<template>

<!-- 外边框 -->
<div class="box">
       <el-row   align="middle">
           <el-col :span="24">
             <el-input placeholder="请输入账号"> </el-input>
           </el-col>
       </el-row>
       <el-row >
           <el-col :span="24">
        <el-input placeholder="请输入密码"></el-input>
           </el-col>
       </el-row>
       <el-row >
           <el-col :span="12">
               <el-checkbox>Remeber Me</el-checkbox>
           </el-col>
           <el-col :span="12">
              <el-link>Register</el-link>
           </el-col>
       </el-row>
       <el-row>
           <el-col :span="24">
                   <el-button type="button" title="登录" class="login" >
                       登录
                   </el-button>
           </el-col>
       </el-row>
</div>
</template>

<style scoped >
.box{
   margin:0 auto;
   width: 400px;
   height: 300px;
  }
.el-row{
    margin-top: 4px;
}
.login{
    width: 100%;
}
</style>

新增一个Login模板的路由，修改router目录下的index.js文件：新增路由

 {
      path: '/login',
      name: 'Login',
      component: Login
    }

（3）修改一下背景图片，以及logo,网上找了两张图片的url