vue项目简单搭建

node.js的安装和部署

Node.js 是一个开源和跨平台的 JavaScript 运行时环境。

npm 以其简单的结构帮助 Node.js 生态系统蓬勃发展，现在 npm 仓库托管了超过 1,000,000 个开源包，你可以自由使用。

• 通过官网下载msi下载安装（无脑下一步）

• 下载压缩包，解压文件，新建文件夹node-global（npm全局安装位置）和node-cachenpm 缓存路径）

  • 配置环境变量，添加变量NODE_PATH，值为node.exe所在的位置
  • 将%NODE_PATH%，%NODE_PATH%\node_global添加到path中
    • 用 npm -v 和 node -v 测试
  • 设置全局安装位置和缓存路径

  npm config set prefix “node-global路径”
  npm config set cache “node-cache路径
  

  • npm config ls来测试一下

  • //配置淘宝仓库
    npm config set registry http://registry.npm.taobao.org/
    

第一种方式简单，但安装容易出现权限问题，可以换为第二种方式

• 安装淘宝镜像加速器

• npm install cnpm -g
  

• 接下来下载vue-cli（使用淘宝加速器下载更快， vue-cli 是官方提供的vue脚手架）

  cnpm  install vue-cli -g
  

• 安装完成，查看安装列表

  • vue list
    

创建vue-cli应用

• 在文件目录的终端执行vue init webpack myvue
• 
• cd到目录下 cd myvue
• 接下来就是为vue应用程序安装需要的环境，会根据package.json来安装
  使用命令：npm install
• 通过idea来open这个项目
• npm run dev来运行项目

webpack安装

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

## 如果失败用cnpm安装
npm install webpack -g
npm install webpack-cli -g

使用webpack

• 工作目录下新建一个文件夹webpackDemo

• idea打开文件夹，新建modules文件夹，中新建hello.js ，main.js文件

• 在根目录下新建文件webpack.config.js

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

• 命令行执行webpack执行打包，会生成dist文件夹，和bundle.js文件

• 根目录新建index.html，body中添加<script src="dist/js/bundle.js"></script>

• 运行在浏览器查看效果

router路由的安装与使用

• 在项目目录中进行安装

  npm install vue-router --save-dev
  ##如果出现数Tree错误，使用强制安装
  npm install vue-router --save-dev --force
  ##如果下载失败，就是用cnpm
  

• 在src目录下新建router文件夹，编写组件，定义一个index.js专门存放路由

Vue+ElementUI项目搭建

• 在工作目录下安装项目vue init webpack hello-elementui

• 安装依赖

  # 进入工程目录
  cd hello-elementui
  # 安装 vue-router
  npm install vue-router --save-dev
  # 安装element-ui
  npm i  element-ui -S
  # 安装依赖
  npm install
  # 安装SASS加载器
  cnpm install sass-loader node-sass --save-dev
  # 启动测试
  npm run dev
  

• src下新建目录router，view分别新建路由js和Vue对象

路由嵌套

主页面横幅，侧边栏，和子页面一般都需要用到路由嵌套

• 新建子页面Vue对象
• 在route中加入children标签，并引入创建的Vue对象

{
  path: '/main',
  component: Main,
  children: [
    {path: '/user/info',component: Usrinfo},
    {path: '/user/set' ,component: Usrset}
  ]
}

• Main.vue中使用

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <!--插入的地方-->
                <router-link to="/user/info">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <!--插入的地方-->
                <router-link to="/user/set">用户设置</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main>
          <!--在这里展示视图-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "Main"
}
</script>
<style scoped lang="scss">
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
.el-aside {
  color: #333;
}
</style>

参数传递

第一种

• 在路由中添加name属性

  path: '/user/info/:id',
  name: 'Usrinfo',
  component: Usrinfo
  

• vue组件中使用

  <router-link :to="{name: 'Usrinfo',params: {id: 1}}">个人信息</router-link>
  {{$route.params.id}}
  

第二种

• 在路由中开启props

  path: '/user/info/:id',
  name: 'Usrinfo',
  component: Usrinfo
  ,props: true
  

• vue组件中使用

<!-- 使用 -->
{{id}}

<!-- 引入 -->
export default {
  props: ['id'],
  name: "Usrinfo"
}

表格传参

• 在路由中添加变量，并开启props

  path: '/main/:username',
  component: Main,
  props: true,
  

• vue组件中转发

  this.$router.push("/main/" + this.form.username)
  

• 目标vue组件中使用

  {{username}}
  
  props: ['username']
  

转发与重定向

转发

• 在vue组件的method中使用

  this.$router.push("/main")
  

重定向

• 在路由中配置

{
  path: '/toHome',
  redirect: '/main'
}

• vue组件中使用

<router-link to="/toHome">返回首页</router-link>

路由模式

• hash： 路径带#符号，例如：http://localhost/#/login（默认）
• history：路径不带#符号，例如：http://localhost/login

在路由对象中添加 mode: ‘history’,

404页面

• 新建vue组件

• 配置路由

  import NotFound from '../view/NotFound'
  
  {
     path: '*',
     component: NotFound
  }
  

通过axios使用钩子函数

export default {
  props: ['id'],
  name: "Usrinfo",
  beforeRouteEnter: (to,from,next)=>{
    console.log("进入路由之前");
    next();
  },
  beforeRouteLeave: (to,from,next)=>{
    console.log("进入路由之后");
    next();
  }
}

在钩子函数中使用异步请求

• 安装axios

  npm install axios -s
   npm install --save vue-axios --legacy-peer-deps
  

• main.js中引入

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

• vue方法中引用

  methods: {
    getData: function (){
      this.axios({
        method: 'get',
        url: 'http://localhost:8080/static/mock/user.json'
      }).then(function (response){
        console.log(response)
      })
    }
  }