首页 > 其他分享> 文章详细

vue-cli入门

2022-07-25 17:33:49 阅读：180 来源： 互联网

标签：npm vue cli Vue import router 路由入门

什么是vue-cli

vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板；

预先定义好的目录结构及基础代码，就像创建Maven项目时可以选择创建一个骨架项目，足够骨架项目就是脚手架，让开发更加快速。

主要功能

统一的目录结构
本地调式
热部署
单元测试
集成打包上线

环境

安装NodeJS

Node.js：地址
Git : https://git-scm.com/downloads
镜像:https://npm.taobao.org/mirrors/git-for-windows/

确认nodejs安装成功:

cmd 下输入 node -v,查看是否能够正确打印出版本号即可!
cmd 下输入 npm-v,查看是否能够正确打印出版本号即可!

这个npm就是一个软件包管理工具，就和Linux下的apt软件安装差不多！

安装Node.js淘宝镜像加速器（cnpm）

这样子的话,下载会快很多~

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

# 若安装失败，则将源npm源换成淘宝镜像
# 因为npm安装插件是从国外服务器下载，受网络影响大
npm config set registry https://registry.npm.taobao.org
# 然后再执行
npm install cnpm -g

安装的位置:C:\Users\Administrator\AppData\Roaming\npm

安装vue-cli

#在命令台输入
cnpm install vue-cli -g
#查看是否安装成功
vue list

第一个vue-cli应用程序

创建一个Vue项目,我们随便建立一个空的文件夹在电脑上。

我的地址：F:\idea\vue-demo

创建一个基于 webpack 模板的 vue 应用程序

# 这里的 myvue 是项目名称，可以根据自己的需求起名
vue init webpack myvue
vue init [模板] [项目名]

一路都选择no即可

说明：

Project name：项目名称，默认回车即可
Project description：项目描述，默认回车即可
Author：项目作者，默认回车即可
Install vue-router：是否安装vue-router，选择n不安装（后期需要再手动添加）
Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加)
Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加）
Setupe2etests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加）
Should we run npm install for you after the,project has been created:创建完成后直接初始化，选择n，我们手动执行；运行结果！

进入myvue目录里，安装依赖环境

//添加项目依赖
npm install

执行完成后,目录多了很多依赖

备注：当出现问题时，可以查看提示进行处理如下

//启动项目
npm run dev
//关闭项目
Ctrl+C 并输入Y

WebPack

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

npm install webpack -g  //打包工具
npm install webpack-cli -g	//客户端

测试安装成功: 输入以下命令有版本号输出即为安装成功

webpack -v
webpack-cli -v

配置

创建webpack.config.js配置文件

entry：入口文件，指定Web Pack用哪个文件作为项目的入口
output：输出，指定WebPack把处理完成的文件放置到指定路径
module：模块，用于处理各种类型的文件
plugins：插件，如：热更新、代码重用等
resolve：设置路径指向
watch：监听，用于设置文件改动后直接打包

module.exports = {
	entry:"",
	output:{
		path:"",
		filename:""
	},
	module:{
		loaders:[
			{test:/\.js$/,;\loade:""}
		]
	},
	plugins:{},
	resolve:{},
	watch:true
}

使用WebPack

创建项目
创建一个名为modules的目录，用于放置JS模块等资源文件
在modules下创建模块文件，如hello.js，用于编写JS模块相关代码

//暴露一个方法：sayHi
exports.sayHi = function(){
    document.write("<div>Hello Webpack</div>");
}

在modules下创建一个名为main.js的入口文件，用于打包时设置entry属性

//require 导入一个模块，就可以调用这个模块中的方法了
var hello = require("./hello");
hello.sayHi();

在idea控制台输入webpack，进行打包

在项目目录下创建HTML页面，如index.html，导入webpack打包后的JS文件

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>首页</title>
	</head>
	<body>
		<script src="dist/js/bundle.js"></script>
	</body>
</html>

说明

# 参数--watch 用于监听变化，发生变化，就自动重新打包【热部署】
webpack --watch

vue-router路由

尽量的打开官方的文档：Vue Router

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。

功能

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于Vue js过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的CSS class的链接
HTML5历史模式或hash模式，在IE 9中自动降级
自定义的滚动行为

安装vue-router

vue-router是一个插件包，所以我们还是需要用npm/cnpm来进行安装的。

打开命令行工具，进入你的项目目录，输入命令

npm uninstall vue-router //删除router插件
//npm自动下的是最新版，vue-router版本太高和vue2起冲突了
npm i vue-router@3.5.2	//安装指定的3.5.2版本vue-router

虽然router4.X的大部分的Vue Router API都没有变化，但vue-router 4.x只能结合vue3进行使用,vue-router 3.x只能结合vue2进行使用。

安装完之后去node_modules路径看看是否有vue-router信息有的话则表明安装成功。

vue-router实例

将之前案例由vue-cli生成的案例用idea打开
清理不用的东西assert下的logo图片component定义的helloworld组件
在components下，可以自己定义的组件，如：Content.vue，Main.vue

Content.vue和Main.vue内容一样的就只放一个示例代码了

<template>
  <!--内容-->
  <h1>内容</h1>
</template>

<script>
//导出
export default {
  name: "Content"
}
</script>

<!--scoped：作用域，使用后只在当前文档生效-->
<style scoped>

</style>

创建一个专门管理路由的目录router，创建一个主配置index.js，叫index的不一定是主页，也可能是主配置

//导入
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: 'main',
      //跳转的组件
      component: Main
    }
  ]
});

在main.js中配置路由

import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描里面的路由配置

Vue.config.productionTip = false;
new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

在App.vue中使用路由

<template>
  <div id="app">
    <h1>克峰</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>

启动项目，查看效果图

路由嵌套

嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。

示例

创建一个组件UserList

<template>
  <h1>用户列表</h1>
</template>

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

<style scoped>

</style>

编写路由（重点）

import Vue from "vue";
import Router from 'vue-router';
//导入组件
import Main from "../views/Main";
import Login from "../views/Login";
import UserList from "../views/user/UserList";
//使用
Vue.use(Router);
//导出
export default new Router({
  routes:[
    {
      //首页
      path:'/',
      component: Login
    },{
      //初始页面
      path:'/main',
      component: Main,
      children:[ //编写子路由
        {
          path:"/user/list",
          component:UserList
        }
      ]
    },{
      //登录页
      path:'/Login',
      component: Login
    }
  ]
});

编写主页面
查看效果

参数传递

布尔模式

当 props 设置为 true 时，route.params 将被设置为组件的 props。

实现

index.js

Main.vue

UserList.vue

重定向

使用redirect关键字即可，值是重定向的目的地

index.js

Main.vue

404

定义一个主键NotFound，内容自定义

配置404路由（重点）

*号表示任何的请求

路由模式

路由模式有两种

hash：路径带#符号，如http://localhost/#/login
history：路径不带#符号，如http://localhost/login

模式在index.js里配置即可

路由钩子

beforeRouteEnter：在进入路由前执行
beforeRouteLeave：在离开路由前执行

参数说明

to：路由将要跳转的路径信息
from：路径跳转前的路径信息
next：路由的控制参数
- next()：跳转下个页面
- next('/path')：改变路由的跳转方向，使其跳到另一个路由
  - next((vm)=>{})：仅在beforeRouteEnter中可用，vm是主键实例

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

安装Axios：cnpm install axios

main.js引用Axios

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

准备数据：只有static目录下的文件是可以被访问到的，所以就把静态文件放入该目录下。
```
{
  "name": "克峰同学",
  "url": "https://www.cnblogs.com/KeFeng/"
}
```

在beforeRouteEnter中进行异步请求

<script>
export default {
  name: "UserList",
  beforeRouteEnter:(to, from, next)=>{
    console.log("进入路由之前");
    next(vm => {
      vm.getData(); //执行方法
    });
  },
  beforeRouteLeave:(to, from, next)=>{
    console.log("退出路由之前");
    next();
  },
  methods:{
    getData:function (){
      this.axios({ //异步请求
        method:"get", //请求方式
        url: "http://localhost:8080/static/mock/data.json" //请求地址
      }).then(function (response){//请求成功后
        console.log(response) //输出请求到的内容
      })
    }
  }
}
</script>

实战

采用实战教学模式并结合ElementUI组件库，将所需知识点应用到实际中，以最快速度掌握Vue的使用

创建工程

注意：命令行都要使用管理员模式运行

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

#进入工程目录
cd hello-vues
#安装vue-routern 
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

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的视图组件

创建登录页视图，在views目录下创建名为Login.vue的视图组件，其中el-*的元素为ElementUI组件

<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 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的路由配置文件

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
    }
  ]
});

配置main.js文件

import Vue from 'vue'
import App from './App'
import router from './router'

//导入Element
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//使用
Vue.use(router)
Vue.use(Element)

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

App.vue，显示组件

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

<script>

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

<style>

</style>

标签：npm,vue,cli,Vue,import,router,路由,入门
来源： https://www.cnblogs.com/KeFeng/p/16518134.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9