安装vue环境初学者入门搭建

安装学习vue环境

1.安装node.js 此电脑安装默认目录下

2.node -v 查看版本

3.npm -v 查看npm版本

4.npm install vue -g 全局安装vue.js

5.C:\Users\Hzq\AppData\Roaming\npm npm安装vue目录

6.安装npm install webpack -g 全局安装最新版 或者用webpack@3.6.0符号指定版本

7.安装vue脚手架命令 npm i -g vue-cli

Vue项目创建

1.首先创建一个空目录使用工具打开Cmd命令进入空目录

2.查看npm是否安装 npm-v 检查webpack 安装webpack npm install webpack@3.6.0指定版本 -g全局安装

3.查看vue是否安装 vue-V 安装过之后均会出现版本号

npm i -g vue-cli 安装Vue脚手架

4.安装完成使用vue init webpack 目录名

5.输入项目名 回车

Project name（工程名）:回车

6.poject description（工程介绍）：回车

7.Author：作者名

8.Vue build（是否安装编译器）:回车

9.Install vue-router（是否安装Vue路由）：回车

10.Use ESLint to lint your code（是否使用ESLint检查代码，我们使用idea即可）：n

11.Set up unit tests（安装测试工具）：n

12.Setup e2e tests with Nightwatch（测试相关）：n

Should we run npm install for you after the project has been created? (recommended)：选择：No, I will handle that myself

稍等片刻刷新项目

vue项目基本架构介绍

build 构建脚本目录

config构建配置目录

node_modules 依赖node工具包

src 源码目录

assets 资源目录

components 组件目录

App.js 页面级vue组件

main.js 页面入口js文件

static 页面静态目录

test 测试目录

eslintrc.js ES检查语法配置

index.html 入口页面

package.json 项目描述页面

项目运行

npm run build这个是打包编译命令 自动打包dist目录中在服务器上只需要把dist放上去就行了

npm run dev 运行到浏览器 使用localhost:8080访问就行 此时会出现vue页面

app.vue里配置

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
  </div>
</template>
​
<script>
export default {
  name: 'App',
  provide(){
  return{
      reload:this.reload
  }
        },
        data(){
            return{
                isRouterAlive:true
            }
        },
        methods:{
            reload(){
                this.isRouterAlive = false;
                this.$nextTick(function(){
                    this.isRouterAlive = true;
                })
            }
        }
    }
</script>
​
<style>
  body{
    margin: 0px;
  }
</style>
​

取消编译警告在build里webpack.base.conf.js

/* ...(config.dev.useEslint ? [createLintingRule()] : []),*/

注：有问题评论探讨初步接触前端