VUE项目demo

一、npm环境安装

安装npm，是否安装成功检查：

在命令行输入 npm -v 显示版本号，则安装成功，npm因为我之前安装好了，这里不再写安装步骤了

如何搭建一个vue项目(完整步骤) - 对方屌丝正在输入中 - 博客园

二、搭建vue

npm install --global vue-cli

进入你要创建的vue项目目录，创建vue项目,vue-demo为项目名称

vue init webpack vue-demo

Use ESLint to lint your code? (Y/n) 这一步选no 其他的我都选的Y

（这一步会检查你的格式是否规范，例如有两个空格规范，那你只有一个空格就会编译错误。

若这步不小心选择了Y 请参考这篇文档修改 vue项目空格报错，缩进不对报错，格式报错！！！ - _曾经沧海难为水 - 博客园）总结一下就是修改config 目录下找到文件  index.js ，useEslint 属性设置为 false

三、启动项目

npm run dev，启动项目（这里使用npm run dev还是npm run serve 要看package.json里面的scripts里面配置的是什么）

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
} 这种就用npm run serve

浏览器访问 http://localhost:8080

四、简单写个vue项目

就是自己试一下

1）在components文件夹下新建views文件夹，在views文件夹下新建Firs.vue文件

<template>
<div>
{{msg}}
</div>
</template>
<script>
    export default{
        name : "First",
        data(){
            return{
                msg:"Hello my gril!!!"
            }
        }
    }
</script>
<style></style>

2）在router的index.js文件中添加First的路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/views/First'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path: '/First',
      name: 'First',
      component: First
    }
  ]
})

保存后访问：http://localhost:8080/#/first

参考这篇文章写的

如何搭建一个vue项目(完整步骤) - 对方屌丝正在输入中 - 博客园

怎么合并iview组件？

npm install view-ui-plus --save
npm install iview --save

在入口文件main.js中导入

import iView from 'iview';

import 'iview/dist/styles/iview.css';

Vue.use(iView);

就可以开始用iview的组件啦！

主代码在src文件夹下

入口main.js  ------>   App.vue -----> div标签是首页-------> <router-view/>------>router文件夹下的index.js算是一个路由文件，里面配置了页面url和页面的映射关系