VUE项目demo

一、npm环境安装

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

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

https://www.cnblogs.com/hellman/p/10985377.html

二、搭建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 请参考这篇文档修改 https://www.cnblogs.com/shiyiersan/p/12026647.html）总结一下就是修改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

参考这篇文章写的

https://www.cnblogs.com/hellman/p/10985377.html