先下载nodejs，官网地址：

下载 | Node.js 中文网 (nodejs.cn)http://nodejs.cn/download/确认nodejs安装是否成功cmd下输入node -v，查看是否能够正确打印出版本即可，然后再输入npm -v，查看是否能够正确打印出版本即可，这个npm就是一个软件包管理工具，就和linux下的apt软件安装差不多，一般安装nodejs时，npm会自动安装。

然后为了解决下载速度的问题，需要安装node.js淘宝镜像加速器（cnpm），这样的话下载会快很多。在cdm中输入以下代码

# -g就是全局安装
npm install cnpm -g

安装vue-cli

cnpm install vue-cli -g

#测试是否安装成功
#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack
vue list

创建一个基于webpack模板的vue应用程序，全程no到底

#这里的myvue为文件名
vue init webpack myvue

初始化并运行

cd myvue
npm install
npm run dev

ctrl+c停止运行vue应用程序，输入y确定停止。

安装webpack，webpack是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES6等都作为模块来处理和使用。

#安装webpack
npm install webpack -g
#安装webpack-cli
npm install webpack-cli -g

安装完之后再测试是否安装成功。

#测试webpack是否安装成功
webpack -v
#测试webpack-cli是否安装成功
webpack-cli -g

使用webpack打包，先建立一个目录modules，在这个目录下新建两个js文件，分别是hello.js和main.js。

hello.js文件：

扫描二维码关注公众号，回复： 15275642 查看本文章

exports.sayHi=function (){
    document.write("<h1>huyannan</h1>");
}

main.js文件：

var hello = require("./hello");
hello.sayHi();

然后在主目录（webpack_study）下新建webpack.config.js文件

module.exports={
    entry: './modules/main.js',
    output:{
        filename:'./js/bundle.js'
    }
}

最后在终端运行webpack命令即可打包成功。

安装vue-router路由，vue-router是一个插件包。在项目目录下的命令行输入以下命令。

npm install [email protected]  --save-dev 
#或者
cnpm install [email protected]  --save-dev

在main文件中引用vue-router

在main文件中显示声明使用VueRouter

如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);

vue-router使用总结（重点！！！）：

Content.vue文件和Main.vue文件都是组件

router下的index.js文件，类似后端的xml配置文件，配置相应的访问路径和对应的组件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Content from "../components/Content";
import Main from "../components/Main";
//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
  routes: [
    {
      //路由路径
      path: '/content',
      name: 'content',
      //跳转的组件
      component: Content
    },
    {
      //路由路径
      path: '/main',
      name: 'content',
      //跳转的组件
      component: Main
    }
  ]
});

main.js文件相当于主文件，程序的唯一入口

APP文件则是作为view前端显示的。

<template>
  <div id="app">
    <h1>Vue-Router</h1>
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在项目中运行npm run dev，并访问其路径。

建一个工程从零开始

Vue+ElementUI

创建工程

创建一个名为hello-vue的工程vue init webpack jello-vue
安装依赖， vue-router、element-ui、sass-loader和sass四个插件

#进入工程目录
cd hello-vue
#安装vue-routern 
npm install vue-router --save-dev
#安装element-ui
npm i element-ui -S
#安装依赖
npm install
# 安装SASS加载器
cnpm install [email protected] sass1.26.5 --save-dev
#启功测试
npm run dev

npm命令解释

npm install moduleName：安装模块到项目目录下

npm install -g moduleName：-g的意思是将模块安装到全局，具体安装到磁盘哪个位置要看npm config prefix的位置

npm install -save moduleName：–save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写

npm install -save-dev moduleName:–save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写

创建登录页面

目录结构

说明：

assets：用于存放资源文件

components：用于存放Vue功能组件

views：用于存放Vue视图组件

router：用于存放vue-router配置

在views目录下创建首页视图Main.vue组件

<template>
<h1>首页</h1>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>

在views目录下创建登录页面视图Login.vue组件（来自element-ui），代码如下

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="温馨提示" :visible.sync="dialogVisiable" width="30%" :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return{
      form:{
        username:'',
        password:''
      },
      //表单验证，需要在 el-form-item 元素中增加prop属性
      rules:{
        username:[
          {required:true,message:"账号不可为空",trigger:"blur"}
        ],
        password:[
          {required:true,message:"密码不可为空",tigger:"blur"}
        ]
      },

      //对话框显示和隐藏
      dialogVisible:false
    }
  },
  methods:{
    onSubmit(formName){
      //为表单绑定验证功能
      this.$refs[formName].validate((valid)=>{
        if(valid){
          //使用vue-router路由到指定界面，该方式称为编程式导航
          this.$router.push('/main');
        }else{
          this.dialogVisible=true;
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-box{
  border:1px solid #DCDFE6;
  width: 350px;
  margin:180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}
.login-title{
  text-align:center;
  margin: 0 auto 40px auto;
  color: #303133;
}
</style>

在router目录下创建一个名为index.js的vue-router路由配置文件。

import Vue from 'vue'
import Router from 'vue-router'
import Main from "../views/Main";
import Login from '../views/login';
Vue.use(Router);
export default new Router({
  routes:[
    {
      path: '/main',
      component: Main
    },
    {
      path: '/login',
      component:Login
    }
  ]
})

编写 APP.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在main.js中配置路由


import Vue from 'vue'
import App from './App'
import router from "./router"
//
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false

Vue.use(router);
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render:h=>h(App)//ElementUI
})

测试npm run dev

说明：如果出现错误: 可能是因为sass-loader的版本过高导致的编译错误，可以去package.json文件中把sass-loder的版本降低，也有可能是你安装的是node-sass，高版本的node已经弃用node-sass改用sass，主要看报错内容修改相应的版本。

博主第一次安装的是node-sass所以报错了，后面是在网上找到的解决方案。

(1条消息) 高版本node导致 Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.异常_一gi我里giao的博客-CSDN博客https://blog.csdn.net/ouyangchangxiu/article/details/123373118?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2~default~CTRLIST~default-1-123373118-blog-122272092.pc_relevant_multi_platform_whitelistv1&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2~default~CTRLIST~default-1-123373118-blog-122272092.pc_relevant_multi_platform_whitelistv1&utm_relevant_index=1

安装axios 和vue-axios

cnpm install axios vue-axios -s

main.js引用 Axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

前端vue、node、npm、webpack环境搭建从零开始

Vue+ElementUI

创建工程

创建登录页面

猜你喜欢